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 };
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Follow me on Twitter at https://twitter.com/jason_watmore
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some React Help?
Search fiverr to find help quickly from experienced React developers.
Support my work
