Published:

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 to find help quickly from experienced React developers.


Exclusive Semrush Special Offer

FREE 14-day PRO trial to Semrush is available to visitors of this blog. Check your website health quickly and easily with the Semrush all-in-one site auditing tool, eliminate technical SEO issues and optimize your website's speed and performance.


Supported by