0
299
VisualizaçõesCómo evitar reinicializar el componente cuando varias rutas vinculadas usan el mismo componente
Tengo un componente react-router-dom que funcionaba bien en v5, y desde entonces he actualizado a v6. En la estructura del enrutador a continuación, tengo un solo componente al que se accede a través de diferentes rutas. Esta vista tiene una función de reproducción que actualiza la URL cuando se detiene la reproducción, lo que da como resultado una estructura de URL foo/<fooId>/<time> y un medio para vincular algo en la lista con bar/<barId> . Ambos representan el mismo componente, que usa los parámetros según sea necesario y puede manejar ambos puntos de entrada.
El problema que veo desde que cambié a v6 es que se actualizará si se cambia de foo/<fooId>/<time> a bar/<barId> o viceversa. Lo mismo sucede si hago clic en un enlace a bar/<barId> mientras estoy en foo/<foodId>/time . Es el mismo componente y simplemente actualizó la URL del navegador en el pasado (solía usar history.pushState y ahora usa navigate (desde useNavigate ), intenté agregar un parámetro de reemplazo, etc., pero aún vuelve a montar todo el componente.
¿Cómo puedo evitar esto? Solo puedo pensar en reestructurar las páginas, pero hay un montón de marcadores por ahí que serán muy infelices, jaja.
<Route path="/foo" element={<AuthedRoute authState={authState} element={<Bar />} />} > <Route path=":fooId" element={<AuthedRoute authState={authState} element={<Bar />} />} /> <Route path=":fooId/:timestamp" element={<AuthedRoute authState={authState} element={<Bar />} />} /> </Route> <Route path="/bar"> <Route path=":barId" element={<AuthedRoute authState={authState} element={<Bar />} />} /> </Route>Ruta de autenticación:
function AuthedRoute({ authState, element }) { const location = useLocation() const { isLoggedIn } = authState return isLoggedIn ? ( element ) : ( <Navigate to="/login" state={{ from: location, }} /> ) }Estructura similar al ejemplo aquí
1 Respostas
Responde à pergunta0
Dispara, ok, no había notado que habías anidado las rutas "/foo" y "/bar". Eso cambia un poco las cosas. Pude reproducir el problema de cambiar entre las rutas "/foo" y "/bar". Todavía sugiero convertir AuthedRoute en un componente de diseño y representar un Outlet para las rutas anidadas que desea proteger.
function AuthedRoute({ authState }) { const location = useLocation(); const { isLoggedIn } = authState; return isLoggedIn ? ( <Outlet /> ) : ( <Navigate to="/login" state={{ from: location }} /> ); }Lo siguiente es configurar/estructurar sus rutas para que estén correctamente anidadas. La siguiente estructura parece funcionar como espera.
<Routes> <Route element={<AuthedRoute authState={authState} />}> <Route path="/foo/*"> <Route index element={<Bar />} /> <Route path=":fooId" element={<Bar />} /> <Route path=":fooId/:timestamp" element={<Bar />} /> </Route> <Route path="/bar/*"> <Route path=":barId" element={<Bar />} /> </Route> </Route> <Route path="/login" element={<Login /* auth props? */ />} /> </Routes> Para probar cuándo se montó el componente Bar vs. se renderizó ( se pasó un id prop a cada uno para identificarlos ):
const Bar = ({ id }) => { useEffect(() => { console.log("Bar MOUNTED!!", { id }); }, []); useEffect(() => { console.log("Bar Rendered!!", { id }); }, [id]); return <h1>Bar</h1>; };Después de la autenticación, use los enlaces para navegar entre todas las diferentes rutas y observe cuándo se registran los registros "Montados" y "Renderizados".
Aquí está mi caja de códigos de ejecución:
