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 to find help quickly from experienced React freelance developers.
Follow me for updates
I share all new blog posts on Twitter and Facebook.
When I'm not coding
My wife and I are attempting to ride motorcycles around Australia and vlog about it on YouTube.
More React Posts
- Next.js 13 + App Router + MongoDB - User Rego and Login Tutorial with Example
- Next.js 13 - Fix for client component ('use client') hangs when fetching data in useEffect hook
- Add Google AdSense to a Single Page App - React, Angular, Vue, Next etc...
- Next.js 13 + MySQL - User Registration and Login Tutorial with Example App
- Next.js Router - Listen to route (location) change with useRouter
- Next.js 13 + MongoDB - User Registration and Login Tutorial with Example App
- React Router v6 - Redirect with Navigate and useNavigate
- Redux Toolkit createAsyncThunk - Dispatch a Redux Action from an Async Thunk in React with RTK
- React 18 + Redux - User Registration and Login Example & Tutorial
- React Router v6 - Catch All (Default) Redirect in React
- React Router v6 - Listen to location (route) change without history.listen
- React + Axios - Add Bearer Token Authorization Header to HTTP Request
- Redux Toolkit - Fix "The object notation for `createSlice.extraReducers` is deprecated" in React
- React Router 6 - Navigate outside React components
- React + Fetch - Add Bearer Token Authorization Header to HTTP Request
- React 18 + Redux - Basic HTTP Authentication Example & Tutorial
- React 18 Authentication with Node.js JWT API
- React 18 Authentication with .NET 6.0 (ASP.NET Core) JWT API
- React Hook Form 7 - Date Validation Example in React
- React Hook Form 7 - Email Validation Example
- React Router 6 - Private Route Component to Restrict Access to Protected Pages
- React - Access Environment Variables from dotenv (.env)
- React + Redux - HTTP POST Request in Async Action with createAsyncThunk
- React + Redux Toolkit - Fetch Data in Async Action with createAsyncThunk
- React 18 + Redux - JWT Authentication Example & Tutorial
- React - history listen and unlisten with React Router v5
- React Hook Form 7 - Dynamic Form Example with useFieldArray
- React + Fetch - Logout on 401 Unauthorized or 403 Forbidden HTTP Response
- React + Axios - Interceptor to Set Auth Header for API Requests if User Logged In
- React Hook Form - Reset form with default values and clear errors
- React Hook Form - Set form values in useEffect hook after async data load
- React + Fetch - Set Authorization Header for API Requests if User Logged In
- React + Recoil - User Registration and Login Example & Tutorial
- React Hook Form - Password and Confirm Password Match Validation Example
- React Hook Form - Display custom error message returned from API request
- React Hook Form - Submitting (Loading) Spinner Example
- React + Recoil - Basic HTTP Authentication Tutorial & Example
- React + Recoil - Set atom state after async HTTP GET or POST request
- React - Redirect to Login Page if Unauthenticated
- React - Catch All (Default) Redirect with React Router 5
- React + Recoil - JWT Authentication Tutorial & Example
- Next.js - Required Checkbox Example with React Hook Form
- Next.js - Form Validation Example with React Hook Form
- Next.js - Combined Add/Edit (Create/Update) Form Example
- Next.js - Redirect to Login Page if Unauthenticated
- Next.js - Basic HTTP Authentication Tutorial with Example App
- React - How to Check if a Component is Mounted or Unmounted
- Next.js - Alert (Toaster) Notifications
- Next.js 11 - User Registration and Login Tutorial with Example App
- Next.js 11 - JWT Authentication Tutorial with Example App
- Next.js - NavLink Component Example with Active CSS Class
- Next.js - Make the Link component work like React Router Link
- React Hook Form 7 - Required Checkbox Example
- React + Axios - HTTP DELETE Request Examples
- React + Axios - HTTP PUT Request Examples
- React Hook Form 7 - Form Validation Example
- Next.js 10 - CRUD Example with React Hook Form
- React + Fetch - HTTP DELETE Request Examples
- React + Fetch - HTTP PUT Request Examples
- React + Facebook - How to use the Facebook SDK in a React App
- React - Facebook Login Tutorial & Example
- React Router v5 - Fix for redirects not rendering when using custom history
- React Hook Form - Combined Add/Edit (Create/Update) Form Example
- React - CRUD Example with React Hook Form
- React - Required Checkbox Example with React Hook Form
- React - Form Validation Example with React Hook Form
- React - Dynamic Form Example with React Hook Form
- React + Formik Dynamic Form Example
- React - Display a list of items
- React + Axios - HTTP POST Request Examples
- React + Axios - HTTP GET Request Examples
- React - Setup Development Environment
- React Boilerplate - Email Sign Up with Verification, Authentication & Forgot Password
- React Hooks + RxJS - Communicating Between Components with Observable & Subject
- React + Formik - Combined Add/Edit (Create/Update) Form Example
- Fetch API - A Lightweight Fetch Wrapper to Simplify HTTP Requests
- React + Formik - Master Details CRUD Example
- React Hooks + Bootstrap - Alert Notifications
- React Router - Relative Links Example
- React + Fetch - Fake Backend Example for Backendless Development
- React Hooks + Redux - User Registration and Login Tutorial & Example
- React - Alert (Toaster) Notifications
- React - How to add Global CSS / LESS styles to React with webpack
- React + Formik 2 - Form Validation Example
- React + Formik - Required Checkbox Example
- React + Fetch - HTTP POST Request Examples
- React + Fetch - HTTP GET Request Examples
- React + ASP.NET Core on Azure with SQL Server - How to Deploy a Full Stack App to Microsoft Azure
- React + Node.js on AWS - How to Deploy a MERN Stack App to Amazon EC2
- React + Node - Server Side Pagination Tutorial & Example
- React + Formik - Form Validation Example
- React + RxJS (without Redux) - JWT Authentication Tutorial & Example
- React + RxJS - Communicating Between Components with Observable & Subject
- React - Role Based Authorization Tutorial with Example
- React - Basic HTTP Authentication Tutorial & Example
- React + npm - How to Publish a React Component to npm
- npm - JW React Pagination Component
- npm - JW React Modal Dialog
- React - Custom Modal Window / Dialog Box
- React + Redux - JWT Authentication Tutorial & Example
- React + Redux - User Registration and Login Tutorial & Example
- React - Pagination Example with Logic like Google
