react-router-dom v5中如何将多个路由组件整合到主Router

错误原因 #

你之前的写法直接将子路由函数routeComponent1作为值传递给了<Router>，没有渲染它返回的JSX结构，同时违反了React组件首字母大写的命名规范，导致路由配置无法被正确识别。

正确实现方法 #

方法一：将子路由作为组件渲染 #

首先修正导入的组件名称（React要求组件首字母大写），然后在<Router>内部以组件标签的形式渲染子路由：

root.js

import RouteComponent1 from './routeComponent1.js';
import RouteComponent2 from './routeComponent2.js';

class Root extends Component {
  render() {
    return (
      <Router>
        <div>
          <RouteComponent1 />
          <RouteComponent2 />
        </div>
      </Router>
    );
  }
}

你的子路由组件（routeComponent1.js、routeComponent2.js）无需修改，保持原有结构即可。

方法二：导出路由配置数组（更灵活） #

如果需要更灵活的路由管理，可以让子路由文件导出路由配置数组，再在根组件中批量渲染：

routeComponent1.js

export default [
  { path: "/foo", component: foo },
  { path: "/bar", component: bar }
];

routeComponent2.js

export default [
  { path: "/foo2", component: foo2 },
  { path: "/bar2", component: bar2 }
];

root.js

import routes1 from './routeComponent1.js';
import routes2 from './routeComponent2.js';

class Root extends Component {
  render() {
    return (
      <Router>
        <div>
          {[...routes1, ...routes2].map((route, index) => (
            <Route key={index} path={route.path} component={route.component} />
          ))}
        </div>
      </Router>
    );
  }
}

这种方式便于后续对路由进行动态添加、权限控制等操作。

内容的提问来源于stack exchange，提问作者Aarish Mannan