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

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等.

有没有办法可以创建路由别名,以便能够将这些遗留URL映射到新结构化的URL？

我在Vue 2.0中遇到过类似的东西,但我对反应解决方案特别感兴趣.任何建议(除了 - 使用重定向或使用Vue本身代替:D)？

Answer 1

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

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

我相信这比重定向要好得多。希望这可以帮助！

Answer 2

假设你正在使用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" />