Блог

Извиняюсь, если об этом спрашивали раньше, но нигде не смогли найти удовлетворительного ответа.

У меня есть два компонента — Parent и Child , и два маршрута.

 // App.js
<Route path="/parent" component={Parent} />
<Route path="/child/:name" component={Child} />
 

 // Parent.js
// accessible at /parent

const Parent = () => {
  const history = useHistory()

  const children = [
    { id: 1, name: 'Bob', age: 10, school: 'ABC' },
    { id: 2, name: 'Kate', age: 10, school: 'XYZ' },
  ];

  return (
    <>
    <button
      onClick={history.push({
        to: `/child/${children[0]['name']}`,
        state: children[0],
      })}
    >
      Child 1
    </button>
    <button
    onClick={history.push({
      to: `/child/${children[1]['name']}`,
      state: children[1],
    })}
  >
    Child 2
  </button>
    </>
  );
};
 

 // Child.js
// accessible at /child/:name

const Child = ({ name, age, school }) => {
  return (
   <p>{name}</p>
   <p>{age}</p>
   <p>{school}</p>
  )
}
 

Теперь, если я перейду к Parent , выберите дочерний элемент, я увижу Child компонент со всеми данными. Однако, если я полностью обойду родительскую страницу и перейду непосредственно к /child/Bob URL в браузере, реквизит будет undefined , и я не увижу никаких данных на дочерней странице.

Каково общее решение этой проблемы? Я могу подумать о проверке наличия реквизитов Child и, если их нет, перенаправить на Parent использование history.push() . Это делается для предотвращения Child прямого доступа пользователей.

В этом случае вы можете использовать useParams()

проверьте childName , не определено ли тогда,

 const {name} =  useParams();
 

name затем у вас будет параметр Url

Обновить

В конечном итоге идеальная маршрутизация будет работать так: вы всегда отображаете родительский компонент, а затем прокладываете маршруты внутри вашего родительского компонента. Например, для сопоставления основного маршрута / дочернего компонента родительского компонента экспорта, затем внутри родительского компонента есть дочерний элемент маршрута /:name, дочерний элемент экспорта

Главный маршрут

 <Route path={`${match.url}child`} component={Parent} />
 

Внутри родительского элемента передайте столько реквизитов, сколько захотите

 <Route exact path="/child/:name" component={Child} childName={yourVar} />
 

Если вы хотите отобразить другое имя внутри себя h1 в своем дочернем компоненте, то у вас есть потрясающее решение, предоставленное @Tushar. Если вы хотите отобразить значение по умолчанию, когда реквизиты не передаются дочернему элементу ни через маршрут, ни через родителей, тогда вы можете иметь defaultProps в своем компоненте. Например.

 const Child = ({ childName }) => {
  return <h1>{childName}</h1>
}

Child.defaultProps = { childName: 'Whatever value you want to render' };