react-router-config - 一个组件的多个路径答案

【问题标题】：react-router-config - multiple path for one componentreact-router-config - 一个组件的多个路径
【发布时间】：2018-12-19 11:52:26
【问题描述】：

我从这里使用 react-router-config 包：https://www.npmjs.com/package/react-router-config 用于我的项目。我创建了一个 Routes.js 文件，在其中设置了我的路由配置，它看起来像这样：

    export default [
    {
        ...App,
        routes: [
            {
                ...IndexPage,
                path: '/',
                exact: true
            },
            {
                ...CategoryPage,
                path: '/computers'
            },
            {
                ...CategoryPage,
                path: '/home'
            },
            {
                ...NotFoundPage
            }
        ]
    }
];

如您所见，我使用两个路径“/computers”和“/home”来加载相同的组件CategoryPage。我想知道是否可以在一个对象中传递多个路径来加载相同的组件，如下所示：

{
  ...CategoryPage,
  path: ['/computers','/home']
}

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

基于文档https://github.com/ReactTraining/react-router/blob/v3/docs/Glossary.md#path 路径类型是一个字符串，但是当我阅读此更新时，我猜它支持反应路由器版本 4.4 [https://reacttraining.com/react-router/web/api/Route/path-string-string][1]

在这个例子中 <Route path={["/users/:id", "/profile/:id"]} component={User} />

【讨论】：

【解决方案2】：

出于某种原因，我认为你写的方式可能就是这样。您可以首先创建理想的结构，例如。

{
   components: [...CategoryPage],
   path: ['/computers','/home']
}

然后使用您自己的实用程序函数将其转换为您的最终结构。通过这种方式，您可以使您的路由结构尽可能灵活，同时提供一个数据源。我发现这种方式比弯曲路由默认结构更具可扩展性。

【讨论】：