Question

在我的<Switch />中，我动态地创建了一条具有动态路径的路由，理想情况下，所有路径都将加载相同的组件。

我有一个像这样的JSON对象：

{
  "products": [{"name": "car"}]
}

其中仅包含一系列产品，目前只有一个名称为“ car”的产品。

在<Switch />中，我遍历产品以创建一条这样的路线：

{
  ProductHelper.getAllProductPages().forEach(product => {
          console.log(product.name);
          return (
            <Route path={'/' + product.name + '/:id' } component={Search} />
          );
  })
};

控制台日志完美地打印出“汽车”，因此我看不到获得产品名称的问题。但是，当我导航到/ car / test时，我希望它会加载Search组件，但不会加载。

当我创建这样的路线时：

<Route path='/car/test' component={Search} />

这可以完美地加载Search组件，以证明该组件没有问题。

我真的不明白我在这里做错了什么，有人知道吗？

Answer 1

您应该使用.forEach而不是.map，因为forEach不会返回数组。地图有

Answer 2

选项1（推荐）

使用map（无需退货）：

{
  ProductHelper.getAllProductPages().map(product => <Route path={'/' + product.name + '/:id' } component={Search} />)
};

map构建一个数组（在这种情况下，组件的类型为Route）并返回它，这正是您所需要的。当您使用forEach时，它正在考虑将该函数作为要呈现的组件-这是错误的。

选项2（不建议使用）

使用forEach代替map的替代方法：

一个函数返回一个由Components组成的数组：

renderRoutes() {
    const productRouters = [];
    ProductHelper.getAllProductPages().forEach(product => {
      console.log(product.name);
      productRouters.push(
        <Route path={'/' + product.name + '/:id' } component={Search} />
      );
})
      return productRouters;
}

然后渲染它：

render() {
    return (
        <div>
            {
                this.renderRoutes()
            } 
        </div>
    )
}

但是无论如何，我还是建议您使用map（首选）。

在反应路线中使用匹配

2 个答案:

选项1（推荐）

选项2（不建议使用）