如何使用React-Router创建反向路由

Question

我在我的基于react-router的应用中，想知道是否有一种推荐的方式来构造链接的URL。在php的Zend Framework世界里，我会使用反向路由的url helper。我将我的路由名称和参数提供给路由配置，它会产生我要链接到（或在react-router情况下推送到）的URL。

我找到了这个：但是看起来只支持版本1的react-router。我使用的是版本3。

- xanld

---

它在早期版本中存在，但后来被清除了。任何通过搜索到达此处并提出同样问题的人都可以从此线程 https://github.com/ReactTraining/react-router/issues/1514 开始关注这个事件以及所有后续讨论。 - skyboyer

Answer 1

出于同样的目的，我使用了'react-router-dom'包中的generatePath。

例如，projects/routes.js包含配置：

import {generatePath} from "react-router-dom";

export const EDIT = {
    route: "/projects/:id",
    generate(id) {
        return generatePath(this.route, {id})
    }
}

而 <Route> 依赖于 .route 部分：

<Route path={ProjectRoutes.EDIT.route} component={ProjectEdit} />

虽然 <Link> 依赖于 .generate()

<Link to={ProjectRoutes.EDIT.generate(someVariable.id)}>Edit me!</Link>

这绝不是按名称反转。但我发现这种方法更可预测和灵活，因为没有遇到名称冲突的机会。

- skyboyer