如何使用 react-router 创建反向路由

【问题标题】：how to create reverse routes with react-router如何使用 react-router 创建反向路由
【发布时间】：2017-07-14 16:32:21
【问题描述】：

我想知道是否有推荐的方法在基于react-router 的应用程序中为我的链接构建 URL。在Zend Framework 的php 的世界中，我将使用一个使用反向路由的url 助手。我会将我的路由名称和参数输入到路由配置中，它会吐出我要链接到的 URL（或在 react-router 的情况下推送到的 URL）。

我找到了this: 但它看起来只支持react-router 的最高版本1。我在第 3 版。

【问题讨论】：

它存在于（非常非常）早期版本中，但后来被消灭了。任何通过搜索到达这里并提出相同问题的人都可以关注从 therad github.com/ReactTraining/react-router/issues/1514 开始的戏剧以及所有后续讨论。

标签： javascript react-router

【解决方案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>

这绝对不是名字倒转的。但我发现这种方法更可预测且更灵活，因为不会发生名称冲突。

【讨论】：