Question

我有三个组件：AitemComponent，BitemComponent和CitemComponent。 Items数组包含项目列表。

我想根据向路线渲染相应的组件？每个Component捕获路由参数并返回项目的视图。

(this.state.items) ?
                this.state.items.map(item => (
                  <Switch>
                    <Route path={"/a/"+item.id} component={AitemComponent} />
                    <Route path={"/b/"+item.id} component={BitemComponent} />
                    <Route path={"/c/"+item.id} component={CitemComponent} />
                  </Switch>
                ))
              : null

我知道我可以代替<Route />设置<Aitem id="item.id" />。但我想用路由器处理所有事情，这可能吗？如果这种方法听起来很奇怪，还有其他办法吗？

这不起作用，这是输出：

对象无效作为React子对象（找到：具有键{}的对象）。如果您要渲染子集合，请使用数组，或者使用React附加组件中的createFragment（object）包装对象。

谢谢！

Answer 1

好的，关于列表而不是每个项目的页面。从而;应该用这种方式编写项目列表，而不是我上面写的代码：

//generate your this.state.search_result
//put your component here : this.state.component
//pass the parameters in the Component Tag
//Example :
{
                    (this.state.search_result) && (this.state.component) &&
                      this.state.search_result.map((item, key) => (
                          <this.state.component {...this.props} 
                                                aria_expanded={this.state.idofthis === item.id ? true : false}
                                                imageOfThis={(item.images && item.images[0]) ? item.images[0].url : null}
                                                href={(item.href) ? item.href : null}
                                                duration_ms={(item.duration_ms) ? item.duration_ms : null}
                                                key={key} 
                                                id={item.id} 
                                                name={item.name} 
                                                accordion={'#accordion-result'} />
                      ))
                  }

反应路由器：我可以映射路由吗？

1 个答案: