Routing organizational principles and best practices in React applications
P粉046387133
2023-08-16 16:15:12
<p>I have written multiple routes in the App.js file. </p>
<pre class="brush:php;toolbar:false;">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> )}</pre>
<p>Now how do I organize these routes correctly? Since there are about 50 routes and the App.js file contains all 50 routes, I don't think this is a suitable structure. </p>
You can create a new component
AppRouter.jsx
:Then create a file containing routes
routes.js
:Then use it in your
App component
:If you need to create new routes in the future, go to
routes.js
and add them there.