P粉1649427912023-08-17 00:20:26
你可以创建一个新的组件 AppRouter.jsx
:
import {routes} from "@/routes.js"; export default function AppRouter() { return ( <Routes> {routes.map(route => <Route path={route.path} element={route.component} />)} <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 /> }, ]
然后在你的 App 组件
中使用它:
function App() { return ( <MainLayout> <AppRouter/> </MainLayout> )}
如果你需要在将来创建新的路由,请前往 routes.js
并在那里添加它们。