Question

我有两个组件FirstLayout和SecondLayout，需要Header组件才能显示完整的页面。

此刻，我做出了这个决定，即在两个页面上都渲染Header组件，并且当我从/first切换到/second或从{切换时，不会重新渲染从{1}}到/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组件，则每次我从{{ 1}}到Header或从Header到/first路径

/second

因此，我的目标是在处理布局和路线时实现一些优雅的方法。有没有办法让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.

如何优雅地在React-Router中使用布局？

1 个答案: