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
.