Как я могу передать реквизит в компонент реагировать маршрутизатор?

Question

Я новичок в реакции и пытаюсь понять, как передавать реквизит.

1-й, я установил компонент Navlink, который содержит свойство подкатегорий:

<NavLink
  catid={category.id}
  to={category.route}
  catname={category.name}
  subcategories={category.subcategories}
>
  {category.name}
</NavLink>

{category.route} , {category.name}, {category.subcategories} выбираются из файла json, поэтому с этой частью все в порядке.

Каждый маршрут определен так:

<Route
  path='/epicerie-sucree'
  render={(props) => (
    <CategoryPage
      {...props}
      catid={10}
      catname={"Epicerie sucrée"}
      subcategories={props.subcategories}
    />
  )}
/>

, поэтому он отображает компонент с именем <CategoryPage/>

А вот код компонента CategoryPage:

export default function CategoryPage(props) {  
  return (
    <div>
      {  props.subcategories.map(subcat => (
            <div>{subcat.subcat_name}</div>
      ))}
      <FooterCat cat={catData.categories}></FooterCat>
    </div>) 
}

Таким образом, компонент categoryPage должен правильно получать реквизиты, передаваемые через маршрутизатор, нет?

Вместо этого выдает ошибку «Ошибка типа: невозможно прочитать свойство« карта »из неопределенного» Я не понимаю ... Спасибо

Answer 1

NavLink не будет передавать реквизиты компоненту, отображаемому маршрутом, но вы можете передать некоторое «состояние» по маршруту pu sh, который происходит. render prop передает route-props компоненту, а вы распространяете его на CategoryPage компонент.

<NavLink
  to={{
    pathname: category.route,
    state: {
      catid: { category.id },
      catname: { category.name },
      subcategories: { category.subcategories },
    }
  }}
>
  {category.name}
</NavLink>

Теперь состояние будет передано с маршрутом pu sh в месте проп.

props.location.state.subcategories

Компонент

export default function CategoryPage(props) {  
  return (
    <div>
      {
        props.location.state.subcategories.map(subcat => (
          <div>{subcat.subcat_name}</div>
      ))}
      <FooterCat cat={catData.categories}></FooterCat>
    </div>) 
}

Может потребоваться сделать то же самое для catData.categories, поскольку это не так ясно, что это такое