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

Question

我想知道是否有一种推荐的方法来为我的react-router基础应用中的链接构建URL .在Zend Frameworkfor 的世界里php,我将使用一个使用反向路由的url帮助器.我将路由名称和params提供给路由配置,它会吐出我链接到的URL(或者推送到的情况react-router).

我发现了这个:但它看起来只支持最高版本1 react-router.我是第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>

它绝对不是按名称倒转。但我发现这种方法更具可预测性和灵活性，因为不会遇到名称冲突。