Principes organisationnels de routage et bonnes pratiques dans les applications React
P粉046387133
P粉046387133 2023-08-16 16:15:12
0
1
516
<p>J'ai écrit plusieurs itinéraires dans le fichier App.js. </p> <pre class="brush:php;toolbar:false;">fonction App() { retour ( <MainLayout> <Itinéraires> <Route path="/a" element={<A />} /> <Route path="/b" element={<B />} /> <Route path="/c" element={<C />} /> <Route path="/d" element={<D />} /> </Itinéraires> <Route path="/" element={<Connexion />} /> </MainLayout> )}</pre> <p>Maintenant, comment organiser correctement ces itinéraires ? Puisqu'il y a environ 50 routes et que le fichier App.js contient toutes ces 50 routes, je ne pense pas que ce soit une structure appropriée. </p>
P粉046387133
P粉046387133

répondre à tous(1)
P粉164942791

Vous pouvez créer un nouveau composant AppRouter.jsx :

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

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

Créez ensuite un fichier contenant les itinéraires 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 />
  },
]

Ensuite, utilisez-le dans votre App 组件 :

function App() {

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

Si vous devez créer de nouveaux itinéraires à l'avenir, accédez à routes.js et ajoutez-les-y.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal