Tengo una lista de objetos de ruta como esta:
export const routes = [
{ path: '/about', element: About, exact: true },
{ path: '/posts', element: Posts, exact: true },
{ path: '/posts/:id', element: PostDetails, exact: true },
]
Tengo el componente AppRouter , en el que quiero pasar una lista de mis objetos de ruta como accesorios para componentes de Route con una función de mapa en lugar de valores codificados (sección comentada) como este:
const AppRouter = () => {
return (
<Routes>
{routes.map(route =>
<Route
path={route.path}
element={route.element}
exact={route.exact}
/>
)}
{/* <Route path="/about" element={<About />}></Route>
<Route exact path="/posts" element={<Posts />}></Route>
<Route exact path="/posts/:id" element={<PostDetails />}></Route>
<Route path="*" element={<Error />}></Route> */}
</Routes>
);
};
export default AppRouter;
¿Cómo logro esto?
Puede definir la matriz de routes con objetos que especifican el accesorio del element como JSX. Por cierto, las rutas react-router-dom@6 ahora siempre coinciden exactamente, no hay una propiedad exact .
Ejemplo:
export const routes = [
{ path: '/about', element: <About /> },
{ path: '/posts', element: <Posts /> },
{ path: '/posts/:id', element: <PostDetails /> },
];
...
const AppRouter = () => {
return (
<Routes>
{routes.map(route =>
<Route
key={route.path}
path={route.path}
element={route.element}
/>
)}
<Route path="*" element={<Error />} />
</Routes>
);
};
En este punto, básicamente ya ha definido un objeto de configuración de rutas que se puede pasar al gancho useRoutes .
Ejemplo:
export const routesConfig = [
{ path: '/about', element: <About /> },
{ path: '/posts', element: <Posts /> },
{ path: '/posts/:id', element: <PostDetails /> },
{ path: "*", element: <Error /> },
];
...
const AppRouter = () => {
const routes = useRoutes(routesConfig);
return routes;
};