CODEWITHSUNDEEP
javascriptreactjsroutes
Deepanshu Yadav
Deepanshu Yadav

Reputation: 115

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

This is the sample code:

<Route exact path='/user'>
    <UsersList />
</Route>
<Route path='/user/:name'>
    <Sidebar />
    <User />
</Route>

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?

Upvotes: 2

Views: 206

Answers (2)

Chuck
Chuck

Reputation: 804

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)

Upvotes: 1

a.mola
a.mola

Reputation: 4011

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

Upvotes: 1

Related Questions