Estoy tratando de ejecutar un fragmento de código como se muestra a continuación:
class App extends Component { render() { return ( <Router> <div className="App"> <Navbar></Navbar> <Routes> <Route path="/" element={<Home></Home>} /> <Route path="/about" element={<About></About>} /> <Route path="/contact" element={<Contact></Contact>} /> <Route path="/challenges/*" element={<Challenges></Challenges>} /> <Route path="*" element={<NotFound />} /> </Routes> </div> </Router> ); } } let a = 0; const Challenges = (props) => { console.log(++a); console.log(window.location.pathname); const path = props.location.pathname; const slug = path.split("/").slice(path.split("/").length - 1)[0]; const challenge = challenges.find((challenge) => challenge.slug === slug); return ( <div> <h1>30 Days Of React Challenge</h1> <ul> {challenges.map(({ name, slug }) => ( <li key={name}> <NavLink to={`/challenges/${slug}`}>{name}</NavLink> </li> ))} </ul> <Routes> <Route exact path="/challenges" element={<h1>Choose any of the challenges</h1>} /> <Route path={path} element={<Challenge challenge={challenge} />} /> </Routes> </div> ); };quiero obtener la ruta en el componente de ruta Challenges pero arroja un error: No se pueden leer las propiedades de undefined (leyendo 'pathname') intento registrar la variable "a" y "window.location" para probar y se registra dos veces así :
1 /challenges 2 /challengesMi pregunta es por qué no puedo tomar el valor de props.location.pathname y por qué se ejecuta dos veces y la segunda vez arroja un error, ¿por qué no en la primera vez? ¡Gracias por ayudarme! Espero que tengas un buen día.
Route representados a través del element prop no reciben accesorios de ruta .useParams , useLocation , useNavigate , etc... y, por lo tanto, deben ser componentes de función.console.log están en el cuerpo de la función, por lo que son efectos secundarios no intencionales. Esta es probablemente la razón por la que se les llama dos veces, suponiendo que la aplicación se represente en un componente React.StrictMode . Los Challenges deben usar el uselocation de ubicación de uso para acceder al nombre de la ruta. Mueva los registros de la consola a un useEffect para que se llamen una vez por procesamiento al DOM .
const Challenges = (props) => { const { pathname } = useLocation(); useEffect(() => { console.log(++a); console.log(pathname); }); const path = pathname; const slug = path.split("/").slice(path.split("/").length - 1)[0]; const challenge = challenges.find((challenge) => challenge.slug === slug); return ( <div> <h1>30 Days Of React Challenge</h1> <ul> {challenges.map(({ name, slug }) => ( <li key={name}> <NavLink to={`/challenges/${slug}`}>{name}</NavLink> </li> ))} </ul> <Routes> <Route path="/challenges" element={<h1>Choose any of the challenges</h1>} /> <Route path={path} element={<Challenge challenge={challenge} />} /> </Routes> </div> ); };