0

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

user19916444
  • 1
  • update the question with the code – Krishnadev. V Sep 04 '22 at 14:42
  • Please edit the post to include a [mcve] for the relevant code you have an issue working with and using. Can you also specify what the ***installed*** versions of `react` and `react-router` are? You can check by running `npm list react react-router`. If you are running React 18 does this help answer your question? https://stackoverflow.com/a/71833424/8690857 – Drew Reese Sep 04 '22 at 23:10
  • updating the version of react-router-com solve the issue. thank you very much – user19916444 Sep 05 '22 at 06:27

2 Answers2

0

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

Daniel Abdollahi
  • 1
0

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>
Sughosh Pandey
  • 72
  • 3
  • Hi Daniel, I tried to do what you have suggested moving but still not working. Once I click reports or help it didn't go to its respective components. – user19916444 Sep 05 '22 at 02:47