Published: March 23 2020

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 };

 


Need Some React Help?

Search fiverr for freelance React developers.


Follow me for updates

On Twitter or RSS.


When I'm not coding...

Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!


Comments


Supported by