历史上的 React Router RouteParams

Posted 2023-02-22

【中文标题】历史上的 React Router RouteParams

【英文标题】：React Router RouteParams in history

【发布时间】：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 历史上有解析方法吗？

【参考方案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