Как элегантно работать с макетами в реаги-роутере?

Question

У меня есть два компонента FirstLayout и SecondLayout, которым для отображения завершенной страницы требуется компонент Header.

На данный момент я пришел к этому решению, что компонент Header отображается на обоихстраниц и не перерисовывает его, когда я переключаюсь с /first на /second или с /second на /first paths

function App() {
    return (
        <Route exact path={'/(first|second)'} component={Header} />

        <Route exact path={'/first'} component={FirstLayout} />
        <Route exact path={'/second'} component={SecondLayout} />
        <Route exact path={'/third'} component={ThirdLayout} />
    )
}

Но если я использую метод ниже, где FirstLayout и ThirdLayout компоненты уже содержат Header компонент, Header компонент перерисовывается каждый раз, когда я переключаюсь с /first на /second или с /second на /first paths

function App() {
    return (
        <Route exact path={'/fisrt'} component={FirstLayout} /> // FirstLayout already contains Header component
        <Route exact path={'/second'} component={SecondLayout} /> // SecondLayout already contains Header component
        <Route exact path={'/third'} component={ThirdLayout} />
    )
}

Итак, моя цель - добиться элегантного подхода к работе с макетами и маршрутами.Есть ли способ заставить React понять, что компонент Header не следует перерисовывать вторым способом?

Answer 1

На самом деле рекомендуется использовать несколько компонентов Route для разных мест пользовательского интерфейса. Таким образом, ваше первое решение кажется правильным.

От Реакция обучения маршрутизатора :

        // You can render a <Route> in as many places
        // as you want in your app. It will render along
        // with any other <Route>s that also match the URL.
        // So, a sidebar or breadcrumbs or anything else
        // that requires you to render multiple things
        // in multiple places at the same URL is nothing
        // more than multiple <Route>s.