How to render a component when a specific component will render?

user_16760422 0
Viewed 120

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?

reactjs routes javascript
2 Answers

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)

user_163350350

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>
</>
user_153501390
Related