How can you render a composed Route
component
Bottomline from above example is that in the following code, the Wrapped
route will never render it's element
const App = () => (
<Routes>
<Wrapped/>
<Route path="/inline" element={<span >Inline works</span>} />
</Routes>
);
const Wrapped = () => <Route path="/wrapped" element={<span>wrapped</span>} />
Is there a way of doing this kind of composition with the Route
component with react-router v6? Or will react-router v6 only support Route
directly nested in the Routes
component?
Edit, more specifically I'm trying to get a recommendation for using a ProtectedRoute
component, something among the lines of:
type Props = {
element: ReactElement;
redirectRoute: string;
} & RouteProps;
const ProtectedRoute = ({element, redirectRoute, ...rest}: Props) => {
const {isAuthenticated} = useAuth();
<Route {...rest} element={isAuthenticated() ? element : <Navigate to={redirectRoute}/>}/>
}
EDIT: It seems like this used to work in older beta versions, so this might be a bug. At the moment the latest version is 6.0.0-beta.4 & I've logged an issue: https://github.com/remix-run/react-router/issues/8066