React - Nested Routes

Implementing nested routes

Nested routing in React allows you to render nested UI components inside parent components. This is useful for creating complex layouts with multiple levels of navigation. This tutorial covers how to implement nested routes using React Router.

Key Points:

Nested routing allows you to render nested UI components.
React Router provides the Route component to define nested routes.
Nested routes are useful for creating complex layouts with multiple levels of navigation.

Installing React Router

First, install React Router using npm or yarn:

npm install react-router-dom
# or
yarn add react-router-dom

Setting Up BrowserRouter

The BrowserRouter component is the foundation of React Router. It wraps your entire application and provides the routing context.

// Setting up BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root')
);

Defining Nested Routes

Use the Route component to define nested routes inside parent components. Nested routes are defined by including Route components inside other components.

// Defining nested routes
import React from 'react';
import { Route, Switch, Link, useRouteMatch } from 'react-router-dom';

function App() {
    return (
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/dashboard" component={Dashboard} />
        </Switch>
    );
}

function Dashboard() {
    let { path, url } = useRouteMatch();
    
    return (
        <div>
            <h2>Dashboard</h2>
            <ul>
                <li><Link to={`${url}/profile`}>Profile</Link></li>
                <li><Link to={`${url}/settings`}>Settings</Link></li>
            </ul>

            <Switch>
                <Route exact path={path} render={() => <h3>Please select an option.</h3>} />
                <Route path={`${path}/profile`} component={Profile} />
                <Route path={`${path}/settings`} component={Settings} />
            </Switch>
        </div>
    );
}

function Profile() {
    return <h3>Profile</h3>;
}

function Settings() {
    return <h3>Settings</h3>;
}

function Home() {
    return <h3>Home</h3>;
}

export default App;

Using useRouteMatch

The useRouteMatch hook provides information about the matched route, including the path and url. This is useful for creating links and nested routes.

// Using useRouteMatch
import React from 'react';
import { Route, Switch, Link, useRouteMatch } from 'react-router-dom';

function Dashboard() {
    let { path, url } = useRouteMatch();
    
    return (
        <div>
            <h2>Dashboard</h2>
            <ul>
                <li><Link to={`${url}/profile`}>Profile</Link></li>
                <li><Link to={`${url}/settings`}>Settings</Link></li>
            </ul>

            <Switch>
                <Route exact path={path} render={() => <h3>Please select an option.</h3>} />
                <Route path={`${path}/profile`} component={Profile} />
                <Route path={`${path}/settings`} component={Settings} />
            </Switch>
        </div>
    );
}

function Profile() {
    return <h3>Profile</h3>;
}

function Settings() {
    return <h3>Settings</h3>;
}

export default Dashboard;

Creating Components for Nested Routes

Create the components that will be rendered for each nested route. Here are examples of Profile and Settings components:

// Profile component
import React from 'react';

function Profile() {
    return <h3>Profile</h3>;
}

export default Profile;

// Settings component
import React from 'react';

function Settings() {
    return <h3>Settings</h3>;
}

export default Settings;

Full Example

Here is a complete example of implementing nested routes in React:

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';

function App() {
    return (
        <Router>
            <div>
                <nav>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/dashboard">Dashboard</Link></li>
                    </ul>
                </nav>

                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/dashboard" component={Dashboard} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

// Dashboard.js
import React from 'react';
import { Route, Switch, Link, useRouteMatch } from 'react-router-dom';
import Profile from './Profile';
import Settings from './Settings';

function Dashboard() {
    let { path, url } = useRouteMatch();
    
    return (
        <div>
            <h2>Dashboard</h2>
            <ul>
                <li><Link to={`${url}/profile`}>Profile</Link></li>
                <li><Link to={`${url}/settings`}>Settings</Link></li>
            </ul>

            <Switch>
                <Route exact path={path} render={() => <h3>Please select an option.</h3>} />
                <Route path={`${path}/profile`} component={Profile} />
                <Route path={`${path}/settings`} component={Settings} />
            </Switch>
        </div>
    );
}

export default Dashboard;

// Profile.js
import React from 'react';

function Profile() {
    return <h3>Profile</h3>;
}

export default Profile;

// Settings.js
import React from 'react';

function Settings() {
    return <h3>Settings</h3>;
}

export default Settings;

// Home.js
import React from 'react';

function Home() {
    return <h3>Home</h3>;
}

export default Home;

Summary

In this tutorial, you learned how to implement nested routes in React using React Router. Nested routing allows you to render nested UI components inside parent components, creating complex layouts with multiple levels of navigation. You learned how to install React Router, set up BrowserRouter, define nested routes with Route, use the useRouteMatch hook, and create components for nested routes. Understanding nested routing is essential for building sophisticated and well-organized React applications.