Menghalakan prinsip organisasi dan amalan terbaik dalam aplikasi React

Question

Saya telah menulis berbilang laluan dalam fail App.js.

function App() {

kembali (
 <MainLayout>
  <Laluan>
   
    <Laluan laluan="/a" elemen={<A />} />
    <Laluan laluan="/b" elemen={<B />} />
    <Laluan laluan="/c" elemen={<C />} />
    <Laluan laluan="/d" elemen={<D />} />
   
  </Laluan>
  <Route path="/" element={<Log masuk />} />
</MainLayout> )}

Sekarang bagaimanakah caranya saya mengatur laluan ini dengan betul? Memandangkan terdapat kira-kira 50 laluan dan fail App.js mengandungi kesemua 50 laluan, saya tidak fikir ini adalah struktur yang sesuai.

Answer 1

Anda boleh mencipta komponen baharu AppRouter.jsx:

import {routes} from "@/routes.js";

    export default function AppRouter() {
      return (
        <Routes>
          {routes.map(route => <Route path={route.path} element={route.component} />)}
        <Routes/>
      )
    }

Kemudian buat fail yang mengandungi laluan 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 />
  },
]

Kemudian gunakannya dalam App 组件:

anda

function App() {

  return (
   <MainLayout>
     <AppRouter/>
  </MainLayout> )}

Jika anda perlu membuat laluan baharu pada masa hadapan, pergi ke routes.js dan tambahkannya di sana.