0
144
ViewsEl componente React Router v6 Link no cambia la página en la URL raíz
He creado un Link en una Post que enlaza con la Post Page de la publicación. Cuando se hace clic en el enlace con la URL en '/' el enlace no funciona correctamente, muestra el enlace correcto en la URL, por ejemplo http://localhost:3000/posts/624a771b42211849eaada885 pero la página no redirige, el único la forma en que funciona es si actualizo la página. Sin embargo, si estoy en mi página de Popular Posts , el enlace funciona correctamente. Para que quede claro, la publicación se encuentra en un componente llamado Publicaciones que muestra todas las publicaciones. El componente Publicaciones es un componente compartido entre muchos componentes, como la página de inicio ( '/' ) y Publicaciones populares ( /popular ). El enlace funciona en todas las demás páginas, excepto cuando está en '/'
A continuación se muestra el Link .
<Link to={`/posts/${_id}`}> <h2 className='post-title'>{title}</h2> </Link>Mis rutas están configuradas con lo siguiente:
<Route element={!token ? <Navigate replace to='/login' /> : <Navbar />}> <Route path='/' element={<Home />} > <Route path='/popular' element={<Popular />} /> <Route path='/posts/:postId' element={<PostPage />} /> </ Route> </Route>En mi barra de navegación tengo:
const Navbar = () => { return( <> <nav> </nav> <Outlet /> </> ) }y finalmente, en mi Home.js tengo esto:
const Home = () => { return ( <div>content</div> <div>content</div> <div className='home-posts-container'> {window.location.pathname === '/' ? <PopularPosts /> : <Outlet />} </div> <div>content</div> ) }1 answers
Answer question0
Por lo que puedo decir de su componente Home con
const Home = () => { return ( <> <div>content</div> <div>content</div> <div className="home-posts-container"> {window.location.pathname === "/" ? <PopularPosts /> : <Outlet />} </div> <div>content</div> </> ); }; Desea representar el componente PopularPosts exactamente cuando la ruta es "/" , de lo contrario, desea representar una de las rutas anidadas coincidentes.
El problema es que con la implementación anterior, el Outlet no se representa cuando cambia la ruta, por lo que ninguna de las rutas anidadas es compatible.
Parece que desea que el componente Home sea una ruta de diseño, debe representar todos los elementos y el contenido div , y solo el Outlet . Mueva el componente PopularPosts a una ruta de índice.
const Home = () => { return ( <> <div>content</div> <div>content</div> <div className="home-posts-container"> <Outlet /> </div> <div>content</div> </> ); };...
<Routes> <Route element={!token ? <Navigate replace to="/login" /> : <Navbar />}> <Route path="/" element={<Home />}> <Route index element={<PopularPosts />} /> <Route path="/popular" element={<Popular />} /> <Route path="/posts/:postId" element={<PostPage />} /> </Route> </Route> </Routes> 
Para más información, ver: