React Router RouteParams in history

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变量，但我不知道如何才能聪明地实现。

如果我使用PATH。编辑历史上的产品。push方法，它将routeparam与/edit-product/:productId一起放置，这不是我要寻找的行为。历史上是否有routeparams的解析方法?

Answer 1

react-router-dom中还有generatePath。

import { generatePath } from "react-router-dom";
const path = generatePath(PATH.editProduct, {
productId: 1
});
history.push(path);

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