React Router - Remove Trailing Slash from URLs
Tutorial built with React 16.13 and React Router 5.1.2
This is a super quick example of how to remove trailing slashes from URLs in React apps that use React Router.
The solution is to add the following react router <Redirect ... /> that matches any URL with a trailing slash and automatically redirects it to the same URL without the trailing slash.
<Redirect from="/:url*(/+)" to={pathname.slice(0, -1)} />
Here it is in action:(See on StackBlitz at https://stackblitz.com/edit/react-router-remove-trailing-slash)
React Router example app component that removes trailing slash
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. It gets the current pathname with the useLocation() hook provided by the React Router library.
Note: you can't call the useLocation() react hook in the same component that adds the <BrowserRouter> to the DOM, which is why I moved the <BrowserRouter> up one level in the example into /index.js.
import React from 'react';
import { Route, Switch, Redirect, Link, useLocation } from 'react-router-dom';
import { Home } from '../home';
import { TestPage } 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 with trailing slash)</Link>
</div>
</nav>
<Switch>
<Redirect from="/:url*(/+)" to={pathname.slice(0, -1)} />
<Route exact path="/" component={Home} />
<Route path="/test-page" component={TestPage} />
</Switch>
</div>
);
}
export { App };
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
