react-router: ¿Cómo actualizo la URL sin causar una navegación/recarga?

Question 1

Con el enrutador de reacción, he hecho esto para actualizar la URL:

this.props.history.push({
            pathname: `/product/${this.props.product.id}`,
        });

Sin embargo, esto provoca un cambio de renderizado/navegación. ¿Hay alguna manera de actualizar la URL sin hacer eso?

Mi caso de uso es que tengo una lista de productos y cuando hago clic en uno, muestro un Modal y quiero actualizar la URL a algo como ejemplo.com/producto/1 para que el enlace se pueda compartir.

Question 2

No pude encontrar una solución usando React Router, pero pude lograr esto usando la interfaz de historial del navegador llamando:

window.history.replaceState(null, "New Page Title", "/pathname/goes/here")

Puedes aprender más sobre .replaceState aquí.

Reaccionar del enrutador history.replace no siempre funcionará

Reaccionar del enrutador history.replace El método puede activar o no una nueva representación dependiendo de la configuración de la ruta de su aplicación (por ejemplo, tiene un catch-all /* ruta). No impide un renderizado por definición.

Question 3

reemplazar anulará la URL

this.props.history.replace({ pathname: `/product/${this.props.product.id}`})

Question 4

Estoy usando una buena forma de engañar a los usuarios: la URL no cambia.

Para hacer esto, solo necesitará configurar sus rutas de esta manera.

const Home="https://stackoverflow.com/";
const About="https://stackoverflow.com/";
const Contact="https://stackoverflow.com/";

Fíjate en los espacios. Todos los caracteres se contarán dentro de la cita, por lo que debería funcionar.

Routes.tsx

<Route exact path={Home} component={Home} />
<Route exact path={About} component={About} />
<Route exact path={Contact} component={Contact} />

dentro de tu About.tsx y Contact.tsx:

  useEffect(() => {
    window.history.replaceState(null, '', Home);
  }, []);

Después de que el usuario navega a About o Contact páginas, se llamará al gancho y se ejecutará el código dentro de la función de devolución de llamada. Eliminará los espacios después de que el componente se renderice.

Ese debería ser un truco limpio para disfrazar la URL oculta 😂

Question 5

Cuando estás dentro de un componente de reacción, el props posee historypuedes usar eso.

Para aquellos que buscan una forma de navegar incluso cuando no están dentro de un componente de reacción, es decir, no pueden obtener el props.historyEsta es un forma de hacerlo:

En el componente donde representa el enrutador:

// outside the component
export const browserRouterRef = React.createRef();

// on render
<BrowserRouter ref={browserRouterRef}>

Entonces puedes importar browserRouterRef en cualquier lugar y uso browserRouterRef.current.history para cambiar la ruta incluso si no está dentro de un componente de reacción.

¿Ha sido útil esta solución?