Question

我是新人的反应。我希望我的应用程序具有多个布局，用于具有反应路由器的不同页面。以下代码可在https://gist.github.com/avinmathew/e82fe7e757b20cb337d5219e0ab8dc2c

中找到

logging.handler

我的问题是，在使用相同布局更改页面后，是否会重新呈现布局（例如从/ bar到/ bar2）？

Answer 1

是。由于Component是布局支柱并且它发生变化（在Bar1和Bar2之间），因此它将触发新的渲染。 React使用虚拟DOM仅将实际更改传递给真实DOM。

Answer 2

是的，这将在导航时重新渲染您的布局。这样做的原因是render＆＃39;作为一个孩子的功能＆＃39; AKA＆＃39; render prop＆＃39; （这是在React中使用的设计模式，react-router-dom implements）在导航到该路径时被调用。

此外 - Switch呈现第一个孩子或匹配该位置。

试试这个：

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>

具有多个布局的反应路线，重新渲染？

2 个答案: