Q1. What are nested routes in React Router?
Nested routes allow you to render child components within a parent component based on the URL.
They help create layouts where a common UI (like a sidebar) persists while the nested content changes.
They help create layouts where a common UI (like a sidebar) persists while the nested content changes.
Q2. How do you define nested routes in v6?
Define a parent
The parent component must include an
Example:
Route with an element, and place child Route components inside it.The parent component must include an
<Outlet /> where the child routes will be rendered.Example:
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
</Route>
Q3. What is the Outlet component?
When a nested route matches, its element is rendered where the
Outlet is a component that acts as a placeholder for rendering child routes.When a nested route matches, its element is rendered where the
Outlet is placed in the parent component.Q4. How do you link to nested routes?
Use relative paths in
For example, if you're in
You can also use absolute paths.
Link.For example, if you're in
/dashboard, a Link to "settings" will go to /dashboard/settings.You can also use absolute paths.
Q5. Can you nest routes deeply?
Yes, you can nest routes arbitrarily deep.
Each level needs its own
This is useful for complex layouts like multi-level navigation.
Each level needs its own
Outlet.This is useful for complex layouts like multi-level navigation.