84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
我在App.js文件中编写了多个路由。
function App() { return ( } /> } /> } /> } /> } /> )}
现在我该如何正确组织这些路由呢？因为有大约50个路由，而App.js文件中包含了所有这些50个路由，我认为这不是一个合适的结构。
你可以创建一个新的组件AppRouter.jsx:
AppRouter.jsx
import {routes} from "@/routes.js"; export default function AppRouter() { return ( {routes.map(route => )} ) }
然后创建一个包含路由的文件routes.js:
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: }, { path: "/b", component: }, { path: "/c", component: }, { path: "/", component: }, ]
然后在你的App 组件中使用它:
App 组件
function App() { return ( )}
如果你需要在将来创建新的路由，请前往routes.js并在那里添加它们。
你可以创建一个新的组件
AppRouter.jsx:import {routes} from "@/routes.js"; export default function AppRouter() { return ( {routes.map(route => 然后创建一个包含路由的文件
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: }, { path: "/b", component: }, { path: "/c", component:然后在你的
App 组件中使用它:function App() { return ( )}如果你需要在将来创建新的路由，请前往
routes.js并在那里添加它们。