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><Link to="/"></code></li>
<li><Link to="..">Test Page</Link> - <code><Link to=".."></code></li>
<li><Link to=".">Child Page</Link> - <code><Link to="."></code></li>
<li>Grandchild Page - Current</li>
</ul>
</div>
</div>
);
}
export { GrandchildPage };
Need Some React Help?
Search fiverr for freelance React developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!