React ~ Router ~ Nested Routes - rohit120582sharma/Documentation GitHub Wiki

Since routes are regular React components, they may be rendered anywhere in the app, including in child elements.

This helps when it's time to code-split your app into multiple bundles because code-splitting a React Router app is the same as code-splitting any other React app.

Instead of hard coding the initial path and url in child components, what we need is a way to get access to this information relative to the parent route at any level.

  • path - The path pattern used to match. Useful for building nested <Route>s
  • url - The matched portion of the URL. Useful for building nested <Link>s

The most important takeaway from those definitions is to use path for creating nested Routes and url for nested Link.


React Router (v4)

The match.path lets us build <Route> paths that are relative to the parent route, while the match.url lets us build relative links.

function Topic({ match }) {
    return (
        <div>
            Topic: {match.params.topicId}
        </div>
    );
}

function Topics({ match }) {
    return (
        <div>
            <h2>Topics</h2>
            <ul>
                <li><Link to={`${match.url}/react`}>React Newsletters</Link></li>
                <li><Link to={`${match.url}/ui`}>UI Newsletters</Link></li>
            </ul>

            <hr />

            <Route path={`${match.path}/:topicId`} component={Topic} />
        </div>
    );
}

class App extends React.Component {
    render() {
        return (
            <div>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/topics'>Topics</Link></li>
                </ul>

                <hr />

                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route path='/topics' component={Topics} />
                </Switch>
            </div>
        );
    }
}

React Router (v5)

In order to get access to this information, you use the useRouteMatch Hook.

useRouteMatch returns an object which contains information about how the Route was matched. Specifically, it has two properties on it, path and url.

import { useParams, useRouteMatch } from 'react-router-dom';

function Topic() {
    const { topicId } = useParams();

    return (
        <div>
            Topic: {topicId}
        </div>
    );
}

function Topics() {
    const { path, url } = useRouteMatch();

    return (
        <div>
            <h2>Topics</h2>
            <ul>
                <li><Link to={`${url}/react`}>React Newsletters</Link></li>
                <li><Link to={`${url}/ui`}>UI Newsletters</Link></li>
            </ul>

            <hr />

            <Route path={`${path}/:topicId`}>
                <Topic />
            </Route>
        </div>
    );
}

class App extends React.Component {
    render() {
        return (
            <div>
                <ul>
                    <li><Link to='/'>Home</Link></li>
                    <li><Link to='/topics'>Topics</Link></li>
                </ul>

                <hr />

                <Switch>
                    <Route exact path='/'>
                        <Home />
                    </Route>
                    <Route path='/topics'>
                        <Topics />
                    </Route>
                </Switch>
            </div>
        );
    }
}
⚠️ **GitHub.com Fallback** ⚠️