React Router with custom history not working

Question

When I was using BrowserRouter from react-router-dom, My Routes were working. But to use custom history, I replaced BrowserRouter with Router from react-router. After that my Route components are not loading properly but the url is changing properly. Here is my codes:

AppRouter-JS:----

import React from 'react';
import { Router, Route, Switch} from 'react-router';
// import { BrowserRouter as Router,Route, Switch} from 'react-router-dom';
import {createBrowserHistory} from 'history'

import Header from '../components/Header.js';
import Dashboard from '../components/DashboardPage.js'
import CreateExpense from '../components/CreateExpensePage.js';
import EditExpense from '../components/EditExpensePage.js';
import Help from '../components/HelpPage.js';
import PageNotFound from '../components/PageNotFound.js'
import LoginPage from '../components/LoginPage.js'


export const history = createBrowserHistory();

  const AppRouter = ()=>(
    <Router history={history}>
    <div>
      <Header/>
      <Switch>
        <Route path='/' exact={true} component={LoginPage}/>
        <Route path='/dashboard' component={Dashboard}/>
        <Route path='/create' component={CreateExpense} />
        <Route path="/edit/:id" component={EditExpense}/>
        <Route path='/help' component={Help} />
        <Route component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
  )
  export default AppRouter;

HeaderJS:-- (Here we have the NavLinks)

import React from 'react';
import {NavLink, Link} from 'react-router-dom';
import {connect} from 'react-redux';

import {LogoutAction} from '../Redux/Actions/AuthActions.js'

export const Header = ({logoutAction})=>(
    <header>
      <h1>Expense Tracker</h1>
      <p><NavLink exact activeClassName='active-class' to='/'>Home Page</NavLink></p>
      <p><NavLink activeClassName='active-class' to='/create'>Add Expense</NavLink></p>
      <p><NavLink activeClassName='active-class' to='/help'>Help Page</NavLink></p>
      <button onClick={logoutAction}>Logout</button>
    </header>
);

const mapDispatchToProps = (dispatch)=> {
  return {
    logoutAction: ()=> dispatch(LogoutAction())
  }
}

  export default connect(undefined,mapDispatchToProps) (Header);

After clicking any NavLink or Link it always opens the PageNotFound component.

Same here. Setting up a new project on v5.2.0. When I use BrowserRouter everything is good but Router + passing in a history object and only the initial page load switches correctly. Upon subsequent location changes (e.g. clicking on a link) the Switch statement does not seem to match any routes. — beefaroni, Jun 25 '20 at 17:15

score 47 · Answer 1 · answered Jun 25 '20 at 20:37

47

I actually just found my problem, and it might be yours too.

I was on react-router-dom@5.2.0 and history@5.0.0.

react-router 5x is compatible with history 4x. Once I downgraded to history@4.10.1 everything started working.

answered Jun 25 '20 at 20:37

beefaroni

781
5
7

1

thanks men. I want to to emphasize how simple this solution is, so here is my thank you – Júlio Almeida Aug 15 '20 at 23:50
1

Thanks! I couldn't understand why it wasn't working after switching from BrowserRouter. – Vipul Chodankar Aug 19 '20 at 22:42
2

THANK YOU! I've been stuck on this for two days and realized I was running React Router 5x w/ History 5x. So stupid. – snejame Nov 28 '20 at 09:48
4

First, I hate modern software development. Second, THANK YOU! – Filipe Amaral Dec 01 '20 at 04:20
1

I could have easily gone down a rabbit hole of total despair due to this. Thanks my dude. – alexcs Dec 07 '20 at 18:06
i dug around for hours and was about to give up when i chanced upon this. thank you so much! – Rebecca Tay Dec 30 '20 at 09:41
Thank you, Sir. – U4EA Jan 27 '21 at 11:51
Thank you so much! I've been trying to convert my BrowserRouter to Router with custom history and I couldn't figure out why it was breaking it so much! – Alex Lord Feb 20 '21 at 14:59
You save my day bro. Actually, 2 days ;( – Dung Ho Mar 05 '21 at 07:23

score 0 · Answer 2 · answered May 11 '21 at 14:05

0

i used history.goBack("/signup") not history.push("/signup") seems to work for me .

answered May 11 '21 at 14:05

Sepiocop

1

React Router with custom history not working

2 Answers2