P粉1649427912023-08-17 00:20:26
You can create a new component AppRouter.jsx
:
import {routes} from "@/routes.js"; export default function AppRouter() { return ( <Routes> {routes.map(route => <Route path={route.path} element={route.component} />)} <Routes/> ) }
Then create a file containing routes routes.js
:
import A from "@/components/A"; import B from "@/components/B"; import C from "@/components/C"; import Login from "@/components/Login"; export const routes = [ { path: "/a", component: <A /> }, { path: "/b", component: <B /> }, { path: "/c", component: <C /> }, { path: "/", component: <Login /> }, ]
Then use it in your App component
:
function App() { return ( <MainLayout> <AppRouter/> </MainLayout> )}
If you need to create new routes in the future, go to routes.js
and add them there.