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!

React Router - Remove Trailing Slash from URLs

React Router example app component that removes trailing slash

Need Some React Help?

Follow me for updates

When I'm not coding...

Comments

Months

Tags

React Router - Remove Trailing Slash from URLs

React Router example app component that removes trailing slash

Need Some React Help?

Follow me for updates

When I'm not coding...

More React Posts

Comments

Months

Tags