0
196
VistasReact Router v6 child route not rendering
With React Router v6 I want to render the callback page. Although I'm not able to get the output from the element prop in my screen. I'm only getting the output from out and always a blank screen or a 404 for the callback page. What am I missing with the new 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>
</>
);
Also using an Outlet doesn't seem to solve the problem..
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>
</>
);
The BrowserRouter is in my Root component, which is rendering App.
As expected output I do not need the auth route itself the show anything (like with an <Outlet />, although I did try it), but instead I only want the child route to display.
2 Respuestas
Responde la pregunta0
You need to render an Outlet for nested routes to be rendered into.
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
This doesn't strictly relate to your example (since you're using an exact path in the child route) but I ran into a similar issue and figure it may be related. I solved it by adding the index property to the child route. According to the docs for Outlets:
If the parent route matched exactly, it will render a child index route or nothing if there is no index route.
Using your final example, something like this should work if your use case is 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>
</>
);
(Note this only meant to be demonstrative, since the use of the Outlet and child Route are unnecessary in this simplistic example)