Estoy tratando de hacer que react-router-dom funcione con una url simple: /usuario/{nombre} pero por alguna razón no puedo hacer que cargue la página con el slug de url para el nombre.
Este es el retorno de mi componente de función de aplicación:
<> <MainNavBar navigation={navigation} /> <Routes> <Route index={true} element={<Home />} exact /> <Route path="user" element={<User />} exact> <Route path=":name" render={ ({ match: { params: { name } } }) => { console.log(name); console.log("test2"); return (<UserPage userName={name} />); }} /> </Route> <Route path="*" element={<PageNotFound />} /> </Routes> </>Este es el componente Usuario; un marcador de posición para mi cajero automático de depuración.
const User = () => ( <div> <header className="App-header"> <Outlet /> </header> </div> ); Cuando voy a http://localhost:3000/user/test, carga el componente User pero no los elementos secundarios (los elementos Outlet/UserPage)
He probado muchas combinaciones, pero parece que algo no está bien, por lo que cualquier ayuda será muy apreciada. ¡Gracias!
En react-router-dom v6, los componentes de la Route ya no tienen accesorios de render o component , representan sus componentes en el accesorio del element . Use el useParams para acceder a los parámetros de coincidencia de ruta. Si UserPage es un componente que no puede usar ganchos React, entonces use un componente de función contenedora para acceder al parámetro de coincidencia de ruta y páselo como accesorio.
const UserPageWrapper = () => { const { name } = useParams(); useEffect(() => { console.log({ name }); // <-- log param in effect }, [name]); return <UserPage userName={name} />; };...
<> <MainNavBar navigation={navigation} /> <Routes> <Route index element={<Home />} /> <Route path="user" element={<User />}> <Route path=":name" element={<UserPageWrapper />} /> </Route> <Route path="*" element={<PageNotFound />} /> </Routes> </>