Question

我很新来做出反应，并试图了解如何传递道具。

首先我设置了一个Navlink组件，该组件具有一个subcategories属性：

<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道具将route-props传递到组件，然后将其传播到CategoryPage组件。

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

现在，将通过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可能需要做同样的事情，因为不清楚这是什么

如何在React Router组件中传递道具？

1 个答案: