Реагировать на маршрут с несколькими макетами, повторно сделать?

Question

Я новичок в реакции.Я хочу, чтобы у моего приложения было несколько макетов для разных страниц с реагирующим маршрутизатором.Код ниже был найден в 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>

Мой вопрос заключается в том, будет ли макет перерисован после изменения страниц с использованием того же макета (например, из / bar в / bar2)?

Answer 1

Да, это переопределяет ваш макет после навигации.Причина этого заключается в том, что функция render 'как дочерний элемент' AKA ' render prop ' (это шаблон проектирования, используемый в React, который реализует response-router-dom) вызывается при навигациина этот путь.

Также - Переключатель отображает первого потомка или соответствует местоположению.

Попробуйте:

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>

Answer 2

Да.Поскольку Component является реквизитом макета, и он изменяется (между Bar1 и Bar2), он запускает новый рендер.React использует виртуальный DOM только для передачи реальных изменений в реальный DOM.