React router not matching any route, always goes to 404 route

React router can't match any route and always shows last (NotFound) component. Everything works fine if I use BrowserRouter from 'react-router-dom' instead of Router. But I have to use Router because I have to use custom history (for which I am using history library). Heres my code.

import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage';
import AddExpensePage from '../components/AddExpensePage';
import EditExpensePage from '../components/EditExpensePage';
import HelpPage from '../components/HelpPage';
import NotFound from '../components/NotFound';
import Header from '../components/Header';
import LoginPage from '../components/LoginPage';

export let history = createBrowserHistory();

function AppRouter() {
  return (
    <div>
      <Router history={history}>
        <Header />
        <Switch>
          <Route path="/" component={LoginPage} exact={true} />
          <Route path="/dashboard" component={ExpenseDashboardPage} />
          <Route path="/create" component={AddExpensePage} />
          <Route path="/edit/:id" component={EditExpensePage} />
          <Route path="/help" component={HelpPage} />
          <Route component={NotFound} />
        </Switch>
      </Router>
    </div>
  );
}

export default AppRouter;

from Recent Questions - Stack Overflow https://ift.tt/37XbXAW
https://ift.tt/eA8V8J