suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Organisationsprinzipien und Best Practices in React-Anwendungen weiterleiten

<p>Ich habe mehrere Routen in die App.js-Datei geschrieben. </p> <pre class="brush:php;toolbar:false;">function App() { zurückkehren ( <MainLayout> <Routen> <Route path="/a" element={<A />} /> <Route path="/b" element={<B />} /> <Route path="/c" element={<C />} /> <Route path="/d" element={<D />} /> </Routen> <Route path="/" element={<Login />} /> </MainLayout> )}</pre> <p>Wie organisiere ich nun diese Routen richtig? Da es etwa 50 Routen gibt und die App.js-Datei alle diese 50 Routen enthält, halte ich dies nicht für eine geeignete Struktur. </p>
P粉046387133P粉046387133469 Tage vor518

Antworte allen(1)Ich werde antworten

  • P粉164942791

    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 并在那里添加它们。

    Antwort
    0
  • StornierenAntwort