En react-router, no podemos enviar la misma ruta en useHisotry() y provocar una nueva representación. Por ejemplo, si la aplicación del componente se muestra en la ruta https://localhost:3000 y hago clic en el botón Click Me! , no causará una nueva representación:
function App() { const history = useHistory(); return ( <button onClick={() => {history.push('/')}}> Click Me! </button> ) }Quiero lograr una funcionalidad similar, pero no estoy seguro del enfoque o de lo que me estoy perdiendo.
Mi ruta actual se ve así: https://localhost:3000/user/1
Quiero ir al usuario/2 haciendo clic en un botón.
Mi código se parece al siguiente:
<Route exact path="/user/:userId" component={User} /> function User() { const history = useHistory(); return ( <button onClick={() => {history.push('/user/2')}}> Click Me! </button> ) }El código anterior cambia la ruta pero no vuelve a representar el componente. ¿Cómo puedo solucionar este problema?
Gracias
Mi consejo es actualizar para react router dom v6 y usar useNavigate , tutorial aquí
una vez que importe useNavigate desde react-router-dom
let navigate = useNavigate(); y en su botón llama a esta función al hacer clic en pasar la url deseada
<button onClick={()=> navigate('/users/2')} La información de su componente no cambiará porque no está representando nada dinámicamente en él, por lo que debe obtener el ID de userid de la URL y luego, digamos, mostrarlo. Consultar documentos
Como la respuesta a continuación, puede hacerlo exactamente como dijo.
const { userId } = useParams(); return ( <div>userId: { userId }</div> );No recomiendo usar el history para este caso. Si realmente lo necesita, dentro del componente User obtenga el parámetro ID de usuario y reaccione en consecuencia.
<Route exact path='/user/:userId' component={User} /> const User = () => { const { userId } = useParams(); return ( <div>userId: { userId }</div> ); } export default User;