title: React Router with custom history not working
body: <p>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:</p>
  
  <p>AppRouter-JS:----</p>
  
  <pre><code>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 = ()=&gt;(
      &lt;Router history={history}&gt;
      &lt;div&gt;
        &lt;Header/&gt;
        &lt;Switch&gt;
          &lt;Route path='/' exact={true} component={LoginPage}/&gt;
          &lt;Route path='/dashboard' component={Dashboard}/&gt;
          &lt;Route path='/create' component={CreateExpense} /&gt;
          &lt;Route path="/edit/:id" component={EditExpense}/&gt;
          &lt;Route path='/help' component={Help} /&gt;
          &lt;Route component={PageNotFound}/&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
    )
    export default AppRouter;
  </code></pre>
  
  <p>HeaderJS:-- (Here we have the NavLinks)</p>
  
  <pre><code>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})=&gt;(
      &lt;header&gt;
        &lt;h1&gt;Expense Tracker&lt;/h1&gt;
        &lt;p&gt;&lt;NavLink exact activeClassName='active-class' to='/'&gt;Home Page&lt;/NavLink&gt;&lt;/p&gt;
        &lt;p&gt;&lt;NavLink activeClassName='active-class' to='/create'&gt;Add Expense&lt;/NavLink&gt;&lt;/p&gt;
        &lt;p&gt;&lt;NavLink activeClassName='active-class' to='/help'&gt;Help Page&lt;/NavLink&gt;&lt;/p&gt;
        &lt;button onClick={logoutAction}&gt;Logout&lt;/button&gt;
      &lt;/header&gt;
  );
  
  const mapDispatchToProps = (dispatch)=&gt; {
    return {
      logoutAction: ()=&gt; dispatch(LogoutAction())
    }
  }
  
    export default connect(undefined,mapDispatchToProps) (Header);
  </code></pre>
  
  <p>After clicking any NavLink or Link it always opens the PageNotFound component.</p>