React Router RouteParams 历史记录

Question

我正在使用 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的解析方法？

Answer 1

里面有generatePathutil react-router-dom。

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

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

history.push(path);

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