Routing not wirking with navigation Bar

Hello ,

Navigation is not working even clicking url change but still always in the home page , any help please ? this is my code :

package.json

                       {
                          "name": "afspm-front",
                           "version": "0.1.0",
                            "private": true,
                        "dependencies": {
                     "@testing-library/jest-dom": "^4.2.4",
                    "@testing-library/react": "^9.3.2",
                    "@testing-library/user-event": "^7.1.2",
                    "mdbreact": "^4.25.1",
                    "node-sass": "^4.13.1",
                    "react": "^16.12.0",
                    "react-dom": "^16.12.0",
                    "react-router": "^5.1.2",
                     "react-router-dom": "^5.1.2",
                        "react-scripts": "3.3.1"
                         }...

NavBar.jsx

            import React, { Component } from "react";
        import {
        MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink,                         MDBNavbarToggler, 
                MDBCollapse, MDBFormInline,
             MDBIcon
            } from "mdbreact";
        import { BrowserRouter as Router } from 'react-router-dom';

            export default class NavbarPage extends Component {
                    state = {
                  isOpen: false
                            };

                        toggleCollapse = () => {
                          this.setState({ isOpen: !this.state.isOpen });
                            }

                                render() {
                                  return (
                                <Router>
                                  <MDBNavbar color="indigo" dark expand="md">
                                    <MDBNavbarBrand>
                                  <strong className="white-text">SmartPM</strong>
                                </MDBNavbarBrand>
                            <MDBNavbarToggler onClick={this.toggleCollapse} />
                        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen}         navbar>
                                          <MDBNavbarNav left>
                                        <MDBNavItem >
                  <MDBNavLink to="/home">Home</MDBNavLink>
                    </MDBNavItem>
                <MDBNavItem>
                <MDBNavLink to="/cat">Categories</MDBNavLink>
              </MDBNavItem>
                    <MDBNavItem>
                <MDBNavLink to="/product">Products</MDBNavLink>
                        </MDBNavItem>
                                        <MDBNavItem >
                      <MDBNavLink to="#!">Cantact Us</MDBNavLink>
                        </MDBNavItem>
                    </MDBNavbarNav>
                      <MDBNavbarNav right>
                              <MDBNavItem>


                          <MDBIcon icon="power-off"  size="lg" className="white-text pr-3" />



                        </MDBNavItem>
                              </MDBNavbarNav>
                            </MDBCollapse>
                              </MDBNavbar>
                            </Router>
                        );
                                          }
                                }

App.js

                            import React from 'react';
                            import { BrowserRouter , Switch, Route } from "react-router-dom";
                             import './App.css';
                            import HomePage from './Component/HomePage';
                           import Categories from './Component/Categories';

                            function App() {
                                  return (<div>
                                <BrowserRouter>
                                <div className="App">

                                  <Switch>
                            <Route exact path='/' component={HomePage} />
                            <Route exact path='/home' component={HomePage} />
                            <Route  exact path='/cat' component={Categories} />
                            </Switch>
                          </div></BrowserRouter>

                          </div>

                      );
                            }

                                export default App;