Published:

React Router - Relative Links Example

Tutorial built with React 16.13 and React Router 5.1.2

This is a quick example of how to navigate up levels with relative links using the React Router <Link> component.

The solution is to use the following react router <Link> tags to link up one or two levels.

<Link to=".">Up One Level</Link>
<Link to="..">Up Two Levels</Link>

Note: Linking up to relative paths like this leaves trailing slash on the end of the destination URL. To automatically remove the trailing slash the example includes the react router redirect: <Redirect from="/:url*(/+)" to={pathname.slice(0, -1)} /> in the app component. For more info about how it works see React Router - Remove Trailing Slash from URLs.

Here it is in action:(See on StackBlitz at https://stackblitz.com/edit/react-router-relative-links-example)


React Router Example App Component

This is the complete code from the above example React App component that contains all of the react routes including the <Redirect .../> that removes trailing slashes.

import React from 'react';
import { Route, Switch, Link, Redirect, useLocation } from 'react-router-dom';

import { Home } from '../home';
import { TestPage, ChildPage, GrandchildPage } from '../test-page';

function App() {
    const { pathname } = useLocation();

    return (
        <div>
            <nav className="navbar navbar-expand navbar-dark bg-dark">
                <div className="navbar-nav">
                    <Link to="/" className="nav-item nav-link">Home</Link>
                    <Link to="/test-page" className="nav-item nav-link">Test Page</Link>
                </div>
            </nav>
            <Switch>
                <Redirect from="/:url*(/+)" to={pathname.slice(0, -1)} />
                <Route exact path="/" component={Home} />
                <Route exact path="/test-page" component={TestPage} />
                <Route exact path="/test-page/child-page" component={ChildPage} />
                <Route exact path="/test-page/child-page/grandchild-page" component={GrandchildPage} />
            </Switch>
        </div>
    );
}

export { App };


React Router Example Granchild Page Component

This is the example React Granchild Page component that contains relative links that go up one and two levels to parent and grand parent pages.

import React from 'react';
import { Link } from 'react-router-dom';

function GrandchildPage() {
    return (
        <div className="p-4 bg-light">
            <div className="container">
                <h3>Grandchild Page</h3>
                <div>Links:</div>
                <ul>
                    <li><Link to="/">Home</Link> - <code>&lt;Link to="/"&gt;</code></li>
                    <li><Link to="..">Test Page</Link> - <code>&lt;Link to=".."&gt;</code></li>
                    <li><Link to=".">Child Page</Link> - <code>&lt;Link to="."&gt;</code></li>
                    <li>Grandchild Page - Current</li>
                </ul>
            </div>
        </div>
    );
}

export { GrandchildPage };

 

Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter or GitHub to be notified when I post new content.

 


Supported by