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.

Answer 1

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

I was on [email protected] and [email protected].

react-router 5x is compatible with history 4x. Once I downgraded to [email protected] everything started working.