This is the sample code:
<Route exact path='/user'>
<UsersList />
</Route>
<Route path='/user/:name'>
<Sidebar />
<User />
</Route>
UsersList component is like a home/landing page.UsersList and Sidebar both the components contains list of links. When we click any of the link, we will be redirected to that users page.User component will render the information of that specific user.Let say we are on /user/john and want go on /user/jack. But when I am doing this i.e. when I am clicking on the link to go from /user/john to /user/jack, React is re-rendering the Sidebar component.
But I want that Sidebar component should render only once and only when path='/user/:name'. So, how to do it?
To realize what you really want, you need to use layout.
If you introduce layout, it would be look like this.
<container>
<appbar>
</appbar>
<content>
<sidebar>
</sidebar>
<Route path='/user/:name'>
</Route>
</content>
</container>
For example take a look at this. (You need to search the demo based on the framework you are using)
If you can move the Sidebar component out the Route component, then use the React.Fragment shorthand tag as a parent component for all the JSX elements.
So you should use this
<>
<Sidebar />
<Route path='/user/:name'>
<User />
</Route>
</>