React Router stop working after upgrade React - reactjs

Question

I upgrade React from v16.0.0 to the last version to use Hook, after the upgrade, React Router stop working.
This is the AppRoute code:
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import DashboardPage from '../components/DashboardPage';
import HelpPage from '../components/HelpPage';
import NotFoundPage from '../components/NotFoundPage';
import LoginPage from '../components/LoginPage';
import PrivateRoute from './PrivateRoute';
import PublicRoute from './PublicRoute';
export const history = createHistory();
const AppRouter = () => (
<Router history={history}>
<div>
<Switch>
<PublicRoute path="/" component={LoginPage} exact={true} />
<PrivateRoute path="/dashboard" component={DashboardPage}/>
<Route path="/help" component={HelpPage} />
<Route component={NotFoundPage} />
</Switch>
</div>
</Router>
);
export default AppRouter;
I'm getting:
Output
thank you very much!
Ori

Answer 1

The Router Component in react-router-dom is actually called BrowserRouter not Router , so change Router import and Tag to BrowserRouter or Just Provide an alias and it should work without changing the tag
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
and instead of createHistory use createBrowserHistory
import { createBrowserHistory } from "history";
export const history = createBrowserHistory();
Refrence here
CodeSandbox here

Answer 2

Try not combining logic with UI
// ...code...
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// ...code...
const AppRouter = () => {
const [loggedIn, setLoggedIn] = useState(false)
return (
<Router>
<Switch>
{
!loggedIn
? <Route exact path="/" component={LoginPage} />
: <Route exact path="/dashboard" component={DashboardPage}/>
}
<Route exact path="/help" component={HelpPage} />
<Route component={NotFoundPage} />
</Switch>
</Router>
);
}