React route with multiple layouts, re-render?

Question

I am new in react. I want my app to have multiple layouts for different pages with react router. The code below was found in https://gist.github.com/avinmathew/e82fe7e757b20cb337d5219e0ab8dc2c

// Custom route component
const AppRoute = ({ component: Component, layout: Layout, ...rest }) => (
  <Route {...rest} render={props => (
    <Layout>
      <Component {...props} />
    </Layout>
  )} />
)

// Actual routes
<Switch>
  <AppRoute exact path="/foo" layout={MainLayout} component={Foo} />
  <AppRoute exact path="/bar" layout={AltLayout} component={Bar} />
  <AppRoute exact path="/bar2" layout={AltLayout} component={Bar2} />
</Switch>

My question is that will the layout be re-rendered after change of pages using same layout, (e.g. from /bar to /bar2)?

codesandbox.io/s/0mk825l9vw, @lipp, if we use Link component, the layout isnt unmounted, but rendered — Jerryc
– Jerryc, Commented Jun 7, 2018 at 13:13

Canta · Accepted Answer · 2018-06-07 12:36:06Z

1

Yes. Since Component is a Layout prop and it changes (between Bar1 and Bar2), it will trigger a new render. React uses virtual DOM to only pass the real changes to real DOM.

answered Jun 7, 2018 at 12:36

Canta

1,4802 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jerryc Over a year ago

does it means that it makes just a little impact on the performance? comparing to the single layout

Alserda · Accepted Answer · 2018-06-07 12:55:39Z

1

Yes this will re-render your layout upon navigating. The reason for this, is that the render 'function as a child' AKA 'render prop' (this is a design pattern used within React, that react-router-dom implements) gets called upon navigating to that path.

Also - Switch renders the first child or that matches the location.

Try this:

import { Router, Route } from 'react-router-dom';
import { createMemoryHistory } from 'history';

const history = createMemoryHistory();

<Router history={history}>
  <Route component={MainLayout}>
    <Route exact path="/foo" component={Foo} />
  </Route>
  <Route component={AltLayout}>
    <Route exact path="/bar" component={Bar} />
    <Route exact path="/bar2" component={Bar2} />
  </Route>
</Router>

edited Jun 7, 2018 at 12:55

answered Jun 7, 2018 at 12:40

Alserda

4,8041 gold badge19 silver badges25 bronze badges

1 Comment

Jerryc Over a year ago

this code seems not working, all layouts will be rendered

Collectives™ on Stack Overflow

React route with multiple layouts, re-render?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related