Use onClick event listener to change page

src/components/Navbar/MenuDropdown.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import {
-	BrowserRouter as Router,
-	Switch,
-	Route,
-	NavLink,
-} from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
+
 import { Nav, Icon, Dropdown, IconButton, Popover, Whisper } from 'rsuite';
 
 export default function MenuDropdown() {
+	const history = useHistory();
 	const triggerRef = React.createRef();
 
 	function handleSelectMenu(eventKey, event) {
@@ -18,12 +15,18 @@ export default function MenuDropdown() {
 	const MenuPopover = ({ onSelect, ...rest }) => (
 		<Popover {...rest} full>
 			<Dropdown.Menu onSelect={onSelect}>
-				<NavLink to='/login'>
-					<Dropdown.Item eventKey={0}>Login</Dropdown.Item>
-				</NavLink>
-				<NavLink to='/register'>
-					<Dropdown.Item eventKey={1}>Register</Dropdown.Item>
-				</NavLink>
+				<Dropdown.Item
+					eventKey={0}
+					onClick={() => history.push('/login')}
+				>
+					Login
+				</Dropdown.Item>
+				<Dropdown.Item
+					eventKey={1}
+					onClick={() => history.push('/register')}
+				>
+					Register
+				</Dropdown.Item>
 				<Dropdown.Item eventKey={2}>Dashboard</Dropdown.Item>
 				<Dropdown.Item eventKey={3}>Schedule a Meeting</Dropdown.Item>
 				<Dropdown.Item eventKey={4}>Account Settings</Dropdown.Item>

src/screens/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import 'rsuite/lib/styles/index.less';
 import { Container } from 'rsuite';
-import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 
 import Login from './Login';
 import Register from './Register';