React Router5如何在特定路由下阻止DashboardLayout组件渲染

只要loggedin状态为真，DashboardLayout就会被直接加入渲染树，和当前访问路径没有任何绑定。你仅对布局内部的Route做了路径匹配，但外层布局本身没有和路由规则关联，所以访问任意路径时只要处于登录态，布局都会被渲染。

• 方案1：在DashboardLayout内部通过路由匹配控制渲染
  借助react-router提供的useRouteMatch Hook，在布局组件内部判断当前路径是否属于需要展示后台布局的路由，不匹配则直接返回null，不渲染任何布局内容。
  代码示例：

  import { useRouteMatch } from 'react-router-dom'
  
  const DashboardLayout = ({ children }) => {
    // 传入所有需要挂载该布局的路由路径
    const matchPath = useRouteMatch(['/settings', '/edit'])
    if (!matchPath) return null
  
    return (
      <div className="dashboard-container">
        {/* 侧边栏、顶部导航等公共布局元素 */}
        {children}
      </div>
    )
  }
  

  原有路由配置不需要调整，布局自身会完成路径判断，访问/home时不会渲染任何布局内容。

• 方案2：将布局和路由规则直接绑定
  去掉外层裸写的条件判断布局，把DashboardLayout放到对应路由的渲染逻辑中，只有路径匹配时才会挂载布局。
  代码示例：

  <Route path='/home' exact component={Home} />
  {loggedin && (
    <>
      <Route 
        path='/settings' 
        exact 
        render={() => (
          <DashboardLayout>
            <Settings />
          </DashboardLayout>
        )} 
      />
      <Route 
        path='/edit' 
        exact 
        render={() => (
          <DashboardLayout>
            <AdMaker />
          </DashboardLayout>
        )} 
      />
    </>
  )}
  

  这种写法下，只有路径命中/settings或/edit时，DashboardLayout才会被创建渲染，访问/home路径时不会触发布局加载。

• 方案3：封装统一的带布局路由高阶组件
  把登录校验、布局包裹的逻辑收敛到高阶组件中，路由配置直接使用封装后的组件，从根源避免布局脱离路由规则渲染的问题。
  代码示例：

  const withDashboard = (PageComponent) => {
    return (routeProps) => {
      // 未登录直接跳登录页，可根据自己的路由逻辑调整
      if (!loggedin) return <Redirect to="/login" />
      return (
        <DashboardLayout>
          <PageComponent {...routeProps} />
        </DashboardLayout>
      )
    }
  }
  
  // 路由配置
  <Route path='/home' exact component={Home} />
  <Route path='/settings' exact component={withDashboard(Settings)} />
  <Route path='/edit' exact component={withDashboard(AdMaker)} />
  

内容的提问来源于stack exchange，提问作者Syed Mazhar