0

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.

  • It seems to be the same component (which you don't show) on both routes. – jonrsharpe Dec 30 '20 at 22:29
  • Yes in the first place it is without a parameter and it comes empty as expected. But when I try to jump others it is not reloading the component. Edit: Changed it to clear any confusion. – Hürkan Doğan Dec 30 '20 at 22:31

3 Answers3

0

just pass exact prop for the rest routes

<Switch>
  <Route exact path={'/'} component={withRouter(Dashboard)} />
  <Route exact path={'/invoices/:objectId'} component={withRouter(Table)} />
</Switch>
Maged Mohamed
  • 752
  • 8
  • 7
  • I tried it. It loads the Dashboard and then the first NavLink that I click. Then not changes when I click the other NavLinks. But when I click on Dashboard it works again. – Hürkan Doğan Dec 30 '20 at 22:46
  • @HürkanDoğan your problem is not related to React-Router. It is related to the way you might have implemented your `Table` component which doesn't re-render when the `:objectId` changes – Ergis Dec 30 '20 at 23:19
0

I found a solution to my situation from another post relates to this problem: Component does not remount when route parameters change

    useEffect(() => {
            retrieveInvoices();
        }, [props.match.params.objectId]);

I've passed the props as a dependency in my Table Component and now it reloads my data every time I change the URL parameter. There are other better handlings provided in the other post.

0

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.

Ergis
  • 1,105
  • 1
  • 7
  • 18