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

Question

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

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

Answer 1

出于同样的目的，我已经完成了使用 generatePath来自“react-router-dom”包。

例如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>

绝对不是名副其实的倒车。但我发现这种方法更具可预测性和灵 active ，因为不会出现名称冲突。