javascript - 如何优雅地使用 react-router 中的布局？

Question

我有两个组件 FirstLayout和 SecondLayout需要 Header用于显示完成页面的组件。

此刻我做出了这个决定，即呈现 Header两个页面上的组件，当我从 /first 切换时不会重新呈现它至 /second或来自 /second至 /first路径

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路径

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

实际上，鼓励在 UI 的不同位置使用多个 Route 组件。所以您的第一个解决方案似乎是正确的。

来自 react router training :

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