¿Cómo se puede renderizar un componente Route compuesto?
La conclusión del ejemplo anterior es que en el siguiente código, la ruta Wrapped nunca representará su elemento
const App = () => ( <Routes> <Wrapped/> <Route path="/inline" element={<span >Inline works</span>} /> </Routes> ); const Wrapped = () => <Route path="/wrapped" element={<span>wrapped</span>} /> ¿Hay alguna forma de hacer este tipo de composición con el componente Route con react-router v6? ¿O reaccionar-router v6 solo admitirá Route directamente anidado en el componente Routes ?
Editar, más específicamente, estoy tratando de obtener una recomendación para usar un componente ProtectedRoute , algo entre las líneas de:
type Props = { element: ReactElement; redirectRoute: string; } & RouteProps; const ProtectedRoute = ({element, redirectRoute, ...rest}: Props) => { const {isAuthenticated} = useAuth(); <Route {...rest} element={isAuthenticated() ? element : <Navigate to={redirectRoute}/>}/> }EDITAR: parece que esto solía funcionar en versiones beta anteriores, por lo que podría ser un error. Por el momento, la última versión es 6.0.0-beta.4 y registré un problema: https://github.com/remix-run/react-router/issues/8066
¿O reaccionar-router v6 solo admitirá Route directamente anidado en el componente Routes?
Correcto, RRv6 no admite la composición de rutas. En su lugar, intente usar su componente <Wrapped /> dentro del element prop. P.ej
<Route path="/foo" element={<Wrapped>/* something here */</Wrapped>} />En su código, está tratando de usar el componente envuelto como un enrutador, pero no lo es. Es un elemento React que devuelve un elemento React Router. Dado que solo necesita Router en este caso de uso simple , puede tratarlo como una función:
<Suspense fallback={null}> <Routes> {/* Use this as a normal function, and also function name etc.,*/} {Wrapped()} <Route path="/inline" element={<span>Inline works</span>} /> </Routes> </Suspense>Sin embargo, recomendaría no complicar las rutas al intentar agregar personalizaciones en la ruta y, en su lugar, envolver el componente que desea enrutar.
Por ejemplo,
const Wrapped = () => <Route path="/wrapped" element={<span>wrapped</span>} />;a
<Route path="/wrapped" element={<Wrapped>wrapped component</Wrapped>} />