时间戳

首页 > 解决方案 > React-Router：每次命中嵌套路由时都会重新渲染私有路由

javascript - React-Router：每次命中嵌套路由时都会重新渲染私有路由

问题描述

我有 2 个反应路由器；有 2 条路由的主路由器，/login这/是一条受保护的路由；第二个路由器包含/. 受保护的路由会呈现一个Layout组件，其中包含 header、sidemenu、footer 和 main 组件，而Main组件包含我的子路由。

//App
<Router>
  <Switch>
     <Route exact path="/login" component={Login} />
     <ProtectedRoute path="/" component={Layout} />
  </Switch>
</Router>

//Layout
<div className={classes.layout}>
   <Header />
   <div className={classes.content}>
      <SideMenu />
      <Main />
      <Footer />
   </div>
</div>

//Main
<Router>
  <Switch>
     <Route exact path="/" component={...} />
     <Route exact path="/dashboard" component={...} />
     <Route exact path="/another" component={...} />
  </Switch>
</Router>

起初我以为每次点击子路由时，只有Main组件会重新渲染，直到我戳了一下 Profiler DevTool，它显示整个Layout组件都重新渲染了。我尝试将布局页面设置为 a ，它确实为我节省了几毫秒，但有没有办法在每次我转到子路线时React.memo绕过重新渲染布局组件？

标签： javascriptreactjsreact-router-dom

解决方案

推荐阅读