Router not Working for React Router DOM Version 5-CodePudding

I am new new with react. I tried to create a sidebar menu such that when user clicks on the menu it will go the respective components. The URL is changing but the components always stays at the Home Page.enter image description here

CodePudding user response：

You didn't follow the priority of the React routing. Move the home page route from first line to last. It will work.

CodePudding user response：

I see that you're using SWITCH functionality of ROUTER.

The difference between and is, : Renders all the below-mentioned components where the path matches whereas : Render some UI when its path matches the current URL

So, if you want to render only HOME, try the code below! Let me know if this works as per your expectations, else we'll modify it more.

Code -

<Router>
    <Navbar/>
    <Route exact path='/' component={withRouter(Home)} />
    <Route exact path='/reports' component={withRouter(Report)} />
    <Route exact path ='/help' component={withRouter(Help)} />
</Router>