Question

我为我的应用程序创建了一个私有路由。因此，一旦用户登录，他就可以浏览 SideMenu 中的所有页面。这里的问题是每次单击链接时，都会重新呈现 SideMenu 组件，从而导致性能问题。 SideMenu 中的链接使用 Link 包裹

这是我的组件结构：

App.js

<Router>
<PrivateRoute exact path="/" component={Layout} />
<PrivateRoute path="/dashboard" component={Layout} />
<PrivateRoute path="/contact" component={Layout} />
<Route path="/login" component={Login} />
</Router>

Layout.js

<div>
<SideMenu />
 <Switch>
  <Route exact path="/dashboard">
   <Dashboard />
  </Route>
  <Route path="/contact">
   <Contact />
  </Route>
</Switch>
</div>

PrivateRoute.js


export const PrivateRoute = ({component: Component, ...rest}) => (
  <Route {...rest} render={props => (
    localStorage.getItem('user')
      ? <Component {...props} />
      : <Redirect to={{ pathname: '/login', state: { from: props.location }}} />
  )} />
)

Answer 1

尝试替换 App.js 中的代码

<Router>
<PrivateRoute exact path="/" component={Layout} />
<Route path="/login" component={Login} />
</Router>

React 中私有路由上的组件重新渲染

1 个答案: