0
195
VisualizaçõesLa ruta secundaria de React Router v6 no se procesa
Con React Router v6, quiero mostrar la página de devolución de llamada. Aunque no puedo obtener el resultado del accesorio del elemento en mi pantalla. Solo obtengo la salida y siempre una pantalla en blanco o un 404 para la página de devolución de llamada. ¿Qué me estoy perdiendo con el nuevo React Router?
const App: React.FC = () => ( <> <GlobalStyle /> <Suspense fallback={<Loading fullScreen />}> <Routes> <Route path="/" element={<PrivateRoute component={Home} />} /> <Route path="/login" element={<PublicRoute component={Login} />} /> <Route path="/auth/*" element={<p>auth</p>}> <Route path="callback" element={<p>callback</p>} /> </Route> </Routes> </Suspense> </> ); const App: React.FC = () => ( <> <GlobalStyle /> <Suspense fallback={<Loading fullScreen />}> <Routes> <Route path="/" element={<PrivateRoute component={Home} />} /> <Route path="/login" element={<PublicRoute component={Login} />} /> <Route path="/auth/callback" element={<p>callback</p>} /> </Routes> </Suspense> </> ); Además, usar un Outlet no parece resolver el problema.
const App: React.FC = () => ( <> <GlobalStyle /> <Suspense fallback={<Loading fullScreen />}> <Routes> <Route path="/" element={<PrivateRoute component={Home} />} /> <Route path="/login" element={<PublicRoute component={Login} />} /> <Route path="/auth/*" element={<><p>auth</p><Outlet /></>}> <Route path="callback" element={<p>callback</p>} /> </Route> </Routes> </Suspense> </> ); El BrowserRouter está en mi componente Root , que está representando la App .
Como resultado esperado, no necesito la ruta de auth en sí misma para mostrar nada (como con un <Outlet /> , aunque lo probé), sino que solo quiero que se muestre la ruta secundaria.
2 Respostas
Responde à pergunta0
Debe renderizar un Outlet para que se rendericen las rutas anidadas.
import { Outlet } from 'react-router-dom'; ... <Route path="/auth/*" element={( <> <p>auth</p> <Outlet /> // <-- nested routes rendered out here </> )} > <Route path="callback" element={<p>callback</p>} /> </Route> 
0
Esto no se relaciona estrictamente con su ejemplo (ya que está usando una ruta exacta en la ruta secundaria), pero me encontré con un problema similar y me imagino que puede estar relacionado. Lo resolví agregando la propiedad index a la ruta secundaria. De acuerdo con los documentos para Outlets:
Si la ruta principal coincide exactamente, generará una ruta de índice secundaria o nada si no hay una ruta de índice.
Usando su ejemplo final, algo como esto debería funcionar si su caso de uso es similar:
const App: React.FC = () => ( <> <GlobalStyle /> <Suspense fallback={<Loading fullScreen />}> <Routes> <Route path="/" element={<PrivateRoute component={Home} />} /> <Route path="/login" element={<PublicRoute component={Login} />} /> <Route path="/auth/callback" element={<><p>auth</p><Outlet /></>}> <Route index element={<p>callback</p>} /> </Route> </Routes> </Suspense> </> );(Tenga en cuenta que esto solo pretende ser demostrativo, ya que el uso de la salida y la ruta secundaria son innecesarios en este ejemplo simplista)