I have one Navbar in React with the following code

import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import Header from './components/header/Header';
import Home from './components/home/Home';
import About from './components/about/About';
import Accessories from './components/accessories/Accessories';
import Category1 from './components/accessories/categories/Category1';
import Category2 from './components/accessories/categories/Category2';
import Category3 from './components/accessories/categories/Category3';
import Category4 from './components/accessories/categories/Category4';
import Contact from './components/contact/Contact';
import Footer from './components/footer/Footer';

const App = () => {
    return (
        <div className="App">
            <Header />
            <Router>
                <Switch>
                    <Route exact path="/">
                        <Home />
                        <About />
                        <Accessories />
                        <Contact />
                    </Route>
                    <Route exact path="/category1">
                        <Category1 />
                    </Route>
                    <Route exact path="/category2">
                        <Category2 />
                    </Route>
                    <Route exact path="/category3">
                        <Category3 />
                    </Route>
                    <Route exact path="/category4">
                        <Category4 />
                    </Route>
                </Switch>
            </Router>
            <Footer />
        </div>
    );
}

export default App;

I can go smoothly from / to /category1, but when I reroute to / from /category1, no rerendering is happening until I refresh the page. I have no idea what to do now. Thank you for any help in advance

Edited: I just changes all my Links to anchor tags and now they are working but is it a good practice?