Advanced React Router Techniques

1. Introduction

React Router is a powerful library for handling routing in React applications. This lesson will cover advanced techniques including nested routing, dynamic routing, route guards, redirects, and code splitting.

2. Nested Routes

Nested routes allow you to build complex UI structures. You can define child routes that render components within a parent component.

Example:


import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
    return (
        
            
                }>
                    } />
                    } />
                    }>
                        } />

In this example, Settings is a nested route under Dashboard.

3. Dynamic Routing

Dynamic routing allows you to create routes based on data. This is useful for displaying user-specific content.

Example:


} />

In this example, userId is a dynamic segment that can be accessed in the User component using useParams.

4. Route Guards

Route guards are used to protect certain routes based on authentication or other conditions.

Example:


const PrivateRoute = ({ children }) => {
    const isAuthenticated = useAuth();
    return isAuthenticated ? children : ;
};

// Usage
} />

This example checks if the user is authenticated before rendering ProtectedComponent.

5. Redirects

Redirects can be used to redirect users to different routes based on certain conditions.

Example:


} />

This redirects any user from /old-path to /new-path.

6. Code Splitting

Code splitting helps to load only the necessary components, improving performance.

Example:


const LazyComponent = React.lazy(() => import('./LazyComponent'));

// Usage in Routes
Loading...

}>
    } />

This example lazily loads LazyComponent when the route is accessed.

7. FAQ

What is React Router?

React Router is a library for routing in React applications, allowing you to create dynamic and nested routes.

How do I implement nested routes?

You can implement nested routes by defining child <Route> components within a parent route.

What are route guards?

Route guards are functions or components that control access to certain routes based on authentication or other conditions.