Estoy actualizando react-router-dom de v5 a v6 en un código base con el que aún no estoy del todo familiarizado, y tengo curiosidad sobre cómo reemplazar el siguiente código:
const history = useHistory(); history.replace(url, params);En los documentos, solo muestran lo que haría para reemplazar en caso de que haya 1 argumento. entonces si tuviera:
history.replace(url)Simplemente haría:
const navigate = useNavigate(); navigate(url, {replace: true})¿Cómo me aseguro de que el segundo argumento se mantenga con el enlace useNavigate?
Estoy tentado a hacer esto:
const navigate = useNavigate(); navigate(url, params)o
const navigate = useNavigate(); navigate(url, { state: params })¿Cómo se debe reemplazar sin ningún impacto?
El estado se envía en el segundo parámetro bajo la propiedad de state , lo mismo que indicar una redirección (REEMPLAZAR) frente a navegar (PUSH).
El gancho useNavigate devuelve una función de navigate :
declare function useNavigate(): NavigateFunction; interface NavigateFunction { ( to: To, options?: { replace?: boolean; state?: any } ): void; (delta: number): void; }
Tenga en cuenta que el segundo argumento es un argumento de options con propiedades de replace y state .
| Acción | v5history = useHistory() | v6navigate = useNavigate() |
|---|---|---|
| Navegar | history.push(url) | navigate(url) |
| redirigir | history.replace(url) | navigate(url, { replace: true }) |
| Navegar con estado | history.push(url, params) | navigate(url, { state: params }) |
| Redirigir con estado | history.replace(url, params) | navigate(url, { replace: true, state: params }) |
navigate(url, params) solo funcionaría si params es un objeto con propiedades de replace y/o state , por ejemplo, { replace: true, state: { ... } } .