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.
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") Puede obtener más información sobre .replaceState aquí .
React Router's history.replace no siempre funcionará
El método history.replace de React Router puede o no desencadenar una nueva representación dependiendo de la configuración de la ruta de su aplicación (por ejemplo, tiene una ruta catch-all /* ). No impide un renderizado por definición.
reemplazar anulará la URL
this.props.history.replace({ pathname: `/product/${this.props.product.id}`})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 = '/'; const About = '/ '; const Contact = '/ ';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 su About.tsx y Contact.tsx :
useEffect(() => { window.history.replaceState(null, '', Home); }, []); Después de que el usuario navegue a las páginas About de o Contact , 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 😂