React應用中的路由組織原則與最佳實踐

Question

我在App.js檔案中編寫了多個路由。

function App() {

return (
 <MainLayout>
  <Routes>
   
    <Route path="/a" element={<A />} />
    <Route path="/b" element={<B />} />
    <Route path="/c" element={<C />} />
    <Route path="/d" element={<D />} />
   
  </Routes>
  <Route path="/" element={<Login />} />
</MainLayout> )}

現在我該如何正確組織這些路由呢？因為有大約50個路由，而App.js檔案包含了所有這些50個路由，我認為這不是一個合適的結構。

Answer 1

你可以建立一個新的元件 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 並在那裡新增它們。