历史上的 React Router RouteParams答案

【问题标题】：React Router RouteParams in history历史上的 React Router RouteParams
【发布时间】：2021-10-24 10:58:09
【问题描述】：

我正在使用 react 17.0.2 并已定义如下路线：

export const PATH = {
  editProduct: '/edit-product/:productId'
}
export const routes = [
  {
    path: PATH.editProduct,
    render: (props) => <Product {...props}/>
  }
]
export const useRoutes = () => ({ PATH, routes });

路由随后与 'react-router-dom' 版本一起使用：^5.2.0

之前一些没有 routeparams 的路径使用history.push(PATH.somePath); 并且它可以工作，但我想在某些组件中使用 react routerParams。

喜欢：

history.push({pathname: PATH.editProduct, routerParam: {productId: "2"} });

以前的带有 routeparams 的路径已通过不使用 PATH 变量传递，而是键入 history.push('/edit-product/' + productId); 之类的字符串我想重用 PATH 变量，但我不知道如何巧妙地实现它。

如果我在 history.push 方法中使用 PATH.editProduct，它会将 routeparam 与它一起放置，就像 /edit-product/:productId 一样，这不是我正在寻找的行为。 routeparams 历史上有解析方法吗？

【问题讨论】：

标签： reactjs typescript react-router-dom

【解决方案1】：

react-router-dom中有generatePath util。

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

const path = generatePath(PATH.editProduct, {
  productId: 1
});

history.push(path);

https://reactrouter.com/web/api/generatePath

【讨论】：