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

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组件的代码：

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

所以分类页面组件应该正确接收通过路由器传输的道具，不是吗？

相反，它抛出一个错误“TypeError:无法读取未定义”的属性“map”。。。谢谢




Answer 1

NavLink不会将道具传递给路由渲染的组件，但您可以做的是传递发生的路由推送的一些“状态”。渲染道具将路由道具传递给组件，然后将其传播到类别页面组件。

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

现在状态将通过位置道具上的route push传递。

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执行相同的操作，因为不清楚这是什么