Replies: 2 comments
-
@OlaoluwaM That was possible pre-v6, but with the added requirement that |
Beta Was this translation helpful? Give feedback.
-
How you define your routes depends on your application architecture. You do not have to declare all your routes in one place. In a frontend application I am engineering at the moment I have multiple features (e.g. teams, users, events, etc). Most features have multiple routes, so each feature is setup to handle its own sub-routes. The App does not need to know about the sub-routes, so there is no reason to declare them at the top. I am also doing code splitting by feature, so this means I do not have to lazy load the component for each route in a feature and thus create a chunk (JS file) for each route, but rather lazy load just the root component of the feature which in turn ensures all code for the feature sub-routes are in the same chunk. As an example, let's assume the following hierarchy:
You can do the following: // src/App.tsx
import { lazy, Suspense } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
const HomeFeature = lazy(() => import("./features/home"));
const TeamFeature = lazy(() => import("./features/teams"));
const UsersFeature = lazy(() => import("./features/users"));
export function App(): JSX.Element {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Suspense fallback={<>Loading...</>}>{<HomeFeature />}</Suspense>} />
<Route path="/teams/*" element={<Suspense fallback={<>Loading...</>}>{<TeamFeature />}</Suspense>} />
<Route path="/users/*" element={<Suspense fallback={<>Loading...</>}>{<UsersFeature />}</Suspense>} />
<Route path='*' element={<div>404</div>} />
</Routes>
</BrowserRouter>
);
} // src/features/users/index.tsx
import { Link, Route, Routes, useParams } from 'react-router-dom';
function UsersHomePage(): JSX.Element {
return (
<div style={{ padding: '50px' }}>
<div style={{ marginBottom: '20px' }}>Users Home Page</div>
<ul>
<li>
<Link to='/users/add' style={{ color: 'red' }}>
Add User
</Link>
</li>
<li>
<Link to='/users/47' style={{ color: 'blue' }}>
View User <b>47</b>
</Link>
</li>
<li>
<Link to='/users/47/edit' style={{ color: 'green' }}>
Edit User <b>47</b>
</Link>
</li>
</ul>
</div>
);
}
function ViewUserPage(): JSX.Element {
const { userId } = useParams();
return (
<div>
View User Page for suer with id <b>{userId}</b>
</div>
);
}
export default function UsersFeature(): JSX.Element {
return (
<Routes>
<Route index element={<UsersHomePage />} />
<Route path='add' element={<div>Add User Page</div>} />
<Route path=':userId' element={<ViewUserPage />} />
<Route path=':userId/edit' element={<div>Edit Specific User Page</div>} />
</Routes>
);
} I hope this answers your question. I have obviously left out code I felt was irrelevant in answering the question. |
Beta Was this translation helpful? Give feedback.
-
Is there a best practice on how to arrange nested routes? Do we keep them all in the root
App
component or separate them placing them where needed contextually.For instance, rather than having all the nested routes for a
/dashboard
route defined on theApp
component, would it be better to have those sub-routes defined within the component that will be rendered when the URL matches/dashboard
?Beta Was this translation helpful? Give feedback.
All reactions