Question

我从这里使用{-{3}}的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']
}

Answer 1

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

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

Answer 2

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

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

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

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

2 个答案: