如何动态地将路由添加到 React 应用程序？答案

【问题标题】：How dynamically add route to the react app?如何动态地将路由添加到 React 应用程序？
【发布时间】：2019-04-17 11:37:41
【问题描述】：

如何动态添加路由以响应应用程序？我试图在我的应用程序中动态添加路由，但在这里发现了一些问题：

component.jsx

import { Route, Switch } from 'react-router-dom';

export default props => (
    <div className="App main-content">
            <Switch>
              {props.admin.routes.length
                ? props.admin.routes.map((route, i) => (
                    <Route
                      exact
                      key={i}
                      path={route.path}
                      component={route.component}
                    />
                  );
                )
                : null}
            </Switch>
    </div>
  );

props.admin.routes

反应开发工具

道具包含路线数据，但如果我链接到account/tickets，我会得到空白页。我能做错什么？

附言

应用在根组件中包含BrowserRouter

【问题讨论】：

请创建一个Minimal, Complete, and Verifiable example，例如CodeSandbox 以便有人更容易帮助您。
您是否尝试过在routes.component 属性上使用简单的JSX 进行调试，例如<div>tes1</div>？有效吗？
@mfakhrusy 是的，我有。相同 - 空白页
我认为这可能与没有直接将路由嵌套在交换机下有关，我也在努力解决这个问题。

标签： javascript reactjs react-router

【解决方案1】：

您可以尝试对Route 组件使用render 属性：

<Switch>
  {this.props.admin.map((item, index) =>
    <Route
      path={item.path}
      exact
      key={item.id || index} // add new id to the data itself
      render={() => item.component}
    />
  )}
</Switch>

原因是，根据this 文档，component props 只能接受一个 react 组件，不能接受内联 JSX。但是您可以使用render 动态生成内联 JSX。

【讨论】：

感谢您的回答。但它也无法解决我的问题