React js多个路由文件不起作用答案

【问题标题】：React js multiple routes files doesn't workReact js多个路由文件不起作用
【发布时间】：2021-04-25 21:49:36
【问题描述】：

我正在开发其中一个项目，并且该项目有 400 多条路线，因此主要路线文件太长。所以我只是根据模块拆分路由代码并导入到主路由文件中。将拆分路由文件导入主路由文件后，路由不起作用。

我正在使用 'react-router-dom'

主文件

ReactDOM.render(
     <React.Suspense
      fallback={<div>Loading</div>}
    >
      <Switch>
       <Route exact path="/"component={Home}  />
       <UsersRoutes />
       <ProductsRoutes />
       </Switch>
    </React.Suspense>,
    document.getElementById('app')
);

UsersRoutes 文件

<>
  <Route exact path="/all-users" component={Component1} />
  <Route exact path="/active-users" component={Component2} />
  <Route exact path="/deactivated-users" component={Component3} />
  ...
</>

ProductsRoutes 文件

<>
  <Route exact path="/all-products" component={Component1} />
  <Route exact path="/sale-products" component={Component2} />
  <Route exact path="/feature-products" component={Component3} />
  ...
</>

【问题讨论】：

你在哪里渲染Router组件？
@lissettdm 进入主路由文件

标签： javascript reactjs routes react-router-dom

【解决方案1】：

你可以试试这个方法。

UsersRoutes.js

import ...
export default [
    { path: '/all-users', component: Component1},
    { path: '/active-users', component: Component2}
]

然后像这样使用它。

<Switch>
    <Route exact path="/"component={Home}  />
    { UserRoutes.map(props => <Route {...props} />) }
</Switch>

【讨论】：