Published: October 22 2020
React Router v5 - Fix for redirects not rendering when using custom history
If you're using React Router v5 with a custom history object (<Router history={history}>) and are experiencing issues like redirects not working properly or not rendering, it might be because of the version of the history library you're using.
React Router (react-router-dom) 5.x works with history 4.x, I was using "react-router-dom": "^5.2.0" with "history": "^5.0.0" and my redirects were updating the url but not rendering the component or logging any errors in the browser console, it was a frustrating couple of hours before I stumbled onto the solution.
The issues were fixed by updating the history version to "history": "^4.10.1".
Example of using react router with custom history
function App() {
return (
<Router history={history}>
<Switch>
<PrivateRoute exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Redirect from="*" to="/" />
</Switch>
</Router>
);
}
Custom history used by react router
import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();
Need Some React Help?
Search fiverr for freelance React developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!
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 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 Router - Remove Trailing Slash from URLs
- 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