javascript - React Router URL works but not Component

Question

React Router changes the URL but the component is not updated. I checked many solutions from StackOverflow but it still didn't work. Here is my code: App.js:

function App() {
  return (
        <div className="App">
                <Header />
                <Sidebar />
          <Switch>
              <Route exact path={'/'} component={withRouter(Dashboard)} />
              <Route path={'/invoices/:objectId'} component={withRouter(Table)} />
          </Switch>
        </div>
  );
}

export default App;

SideNavigation:

    function Sidebar(){

    return(
        <div className="sidebar-wrapper">
            <div className="sidenav">
                <NavLink to={'/'}>Dashboard</NavLink>
                <NavLink to={'/invoices/1'}>Test1</NavLink>
                <NavLink to={'/invoices/2'}>Test2</NavLink>
                <NavLink to={'/invoices/3'}>Test3</NavLink>
            </div>
        </div>
    );
}
export default Sidebar;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './static/index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
  document.getElementById('root')
);

I'm barely new to React and open to any other improvements on my code.

Answer 1

Why have you wrapped your components in a withRoute when they are already wrapped in a Route... /> component? I see no reason to do that.

Please read this.