Soy nuevo en React.js y no estoy seguro de cómo manejar esto.
Hice una selección con reaccionar donde la opción seleccionada se pasa por el enlace. También estoy usando el enrutador de reacción.
Si no se selecciona ninguna opción, quiero redirigir a la primera opción cuando se carga la página.
function initTrainer() { for(let i = 0; i < trainer.length; i++) { trainer[i].link = "/trainer/" + trainer[i].firstName.toLowerCase() + "-" + trainer[i].lastName.toLowerCase(); trainer[i].key = i; } if(window.location.pathname === "/") { // navigate("/trainer/") } }¿Cómo puedo redirigir sin un clic en una función normal? ¿Hay una solución más fácil a este problema?
Y estoy usando React Router V6 pero quiero llamar a navegar() condicionalmente.
Al mirar su pregunta, creo que está preguntando cómo navegar pragmáticamente en reaccionar. Esto se puede hacer usando el enrutador de reacción. Pero dependiendo de la versión del enrutador de reacción, esto es diferente.
En React Router v4 , cuando importa import { Route } from 'react-router-dom' su componente obtiene el objeto Historial a través de props. para que pueda navegar,
this.props.history.push('/yourpath')En el enrutador React V5
Debe importar a continuación la declaración de importación donde está utilizando esta navegación pragmática.
import { useHistory } from "react-router-dom"; export default function home() { const history = useHistory(); //use this function to navigate function handleClick() { history.push("/yourpath"); } return ( <div>home</div> ) }En En React Router V6
import { useNavigate, useParams } from "react-router-dom"; export default function home() { const navigate = useNavigate(); //you can extrat route paramters using useParams hook const { id } = useParams(); //use this function to navigate function handleClick() { navigate("/yourpath"); } return ( <div>home</div> ) }Además, si usa la última versión de next js (V12)
Importe el enlace useRouter a su componente,
import { useRouter } from "next/router"; y ejecute el gancho dentro del componente usando const router = useRouter();
entonces puede usar router.push("/yourpath") para navegar por la ruta deseada
Dado que usa React-Router, puede usar <Redirect> .. puede leer sobre React-Router Redirect aquí: React-Router-Redirect