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

【问题标题】：How do i pass props in react router component?如何在反应路由器组件中传递道具？
【发布时间】：2020-04-23 08:06:54
【问题描述】：

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

第一个我设置了一个 Navlink 组件，它包含一个子类别属性：

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

{category.route},{category.name},{category.subcategories}是从json文件中获取的，所以这部分是OK的。

每条路线都是这样定义的：

<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组件应该能正确接收到通过router传过来的props吧？

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

【问题讨论】：

你应该将props作为url参数传递并相应地定义url
如果在同一个结构中添加json文件内容就好了。
@Sameer Reza Khan。这里是api.jsonbin.io/b/5ea1636098b3d53752331597

标签： javascript reactjs react-router-dom

【解决方案1】：

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

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

现在状态将通过location prop 上的路由推送来传递。

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

【讨论】：