reactjs - React Router Tarihçede RouteParams

React 17.0.2 kullanıyorum ve yönlendirmeleri şöyle tanımladım:

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

Rotalar ardından 'react-router-dom' sürümü: ^5.2.0 ile kullanılır

Routeparam kullanmayan bazı önceki yollar history.push(PATH.somePath); kullandı ve çalışıyor, ama bazı bileşenlerde react routerParam kullanmak istiyorum.

Beğen :

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

Önceki yollar routeparams ile PATH değişkeni kullanılmadan, bunun yerine history.push('/edit-product/' + productId); gibi string yazarak geçirilmişti. PATH değişkenlerini yeniden kullanmak istiyorum, ama bunun akıllıca nasıl yapılabileceğini çözemedim.

Eğer history.push metodunda PATH.editProduct kullanırsam, routeparam'i de birlikte yerleştiriyor, örneğin /edit-product/:productId, bu benim aradığım davranış değil. History'de routeparam'ler için bir parse yöntemi var mı?

Cevap #1

react-router-dom içinde generatePath yardımcı fonksiyonu vardır.

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

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

history.push(path);

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

İlgili makaleler