如何在反应路由器组件中传递道具？

Question

我对做出反应并试图了解如何传递道具很陌生。

第一个我设置了一个包含子类别属性的 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 组件应该正确接收通过路由器传输的道具，不是吗？

相反，它会引发错误“TypeError：无法读取未定义的属性'map'”我不明白......谢谢

Answer 1

NavLink不会将 props 传递给路由正在渲染的组件，但您可以做的是通过发生的路由推送传递一些“状态”。 render prop 将route-props传递给组件，然后将其传播到CategoryPage组件。

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

现在 state 将通过location道具上的路由推送。

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做同样的事情，因为不清楚那是什么