Question

我正在开发一个使用react和react-router构建的新项目。我计划以比以前更清洁的方式重构我的路线。但是，我不想打破用户可能拥有的旧书签。

例如，我的新路线可能如下：

    <Route  path="/" component={Layout}>
        <Route component={ItemList} path="items/:category"  />
        <Route component={ItemDetail} path="item/:designCode" />
    </Route>

一些示例路线可以是 - / items / electronics，/ items / gifts。

但是，我有一个遗留代码库，有类似的路线 - / electronic-items，/ buy-gifts等。

有没有办法可以创建路由别名，以便能够将这些旧版网址映射到新结构化的网址？

我遇到了something similar in Vue 2.0，但对反应解决方案特别感兴趣。任何建议（除了 - 使用重定向或使用Vue本身代替：D）？

Answer 1

假设您使用React-Router v4，可以使用Redirect组件：

<Route path="newListUrl" component={ItemList}/>
<Route path='/oldListUrl' render={() => (
    <Redirect to="newUrl" />
)}/>

如果您正在使用React-Router v3：

<Route path="newListUrl" component={ItemList}/>
<Redirect from='oldListUrl'to="newListUrl" />

Answer 2

我正在使用react-router-dom v4.3.1，从该版本开始，可以将多个路径作为数组提供给Route组件上的路径道具，例如：

<Route path={["oldListUrl", "newListUrl"]} component={ItemList}/>

我认为这比重定向好得多。希望这会有所帮助！

我可以使用react路由器创建别名路由吗？

2 个答案: