使用React Router 4.2渲染组件时，嵌套路由全局渲染问题

我完全懂你现在的困扰——想让某个组件（比如侧边栏）在应用的大部分页面保持渲染，但是用平级路由的方式根本没法实现对吧？React Router 4.x的核心思路是组件化路由，咱们可以通过「布局组件+嵌套路由」的组合轻松搞定这个需求，下面一步步给你拆解解决方案：

第一步：创建带共享组件的布局组件 #

首先，咱们把需要持续显示的组件（比如侧边栏）和主内容区封装成一个布局组件，比如叫MainLayout。这个组件会作为所有需要侧边栏页面的容器：

// 假设你已经有Sidebar组件了，这里直接引用
const MainLayout = () => {
  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      {/* 这个侧边栏会在所有子页面中持续渲染 */}
      <Sidebar />
      {/* 主内容区域，用来渲染各个子路由对应的页面组件 */}
      <main style={{ flex: 1, padding: '1rem' }}>
        {/* 这里用Switch渲染子路由，确保只会匹配第一个符合的路由 */}
        <Switch>
          <Route exact path="/dashboard" component={DashboardView} />
          <Route path="/map" component={Map} />
          <Route path="/sandbox" component={SandboxView} />
          {/* 可选：添加404页面，处理未匹配的路由 */}
          <Route component={NotFoundView} />
        </Switch>
      </main>
    </div>
  );
};

第二步：重构路由配置，实现嵌套 #

接下来，咱们调整路由结构，把不需要侧边栏的页面（比如登录页）单独放在外面，其他页面都嵌套到MainLayout下。同时把权限控制(UserIsAuthenticated)直接包在布局外面，这样所有子页面都会自动继承认证要求，不用重复写：

const configRouter = (history: Object) => {
  return () => (
    <ConnectedRouter history={history}>
      <Switch>
        {/* 登录页不需要侧边栏，单独匹配根路径 */}
        <Route exact path="/" component={LoginView} />
        {/* 所有需要侧边栏的页面都走这个路由，自动应用权限控制和布局 */}
        <Route path="/" component={UserIsAuthenticated(MainLayout)} />
      </Switch>
    </ConnectedRouter>
  );
};

关键知识点解释 #

1. Switch组件的作用：它会按顺序匹配路由，只渲染第一个符合条件的路由，避免出现多个路由同时渲染的问题（比如原来的平级路由可能会同时匹配多个路径）。
2. 嵌套路由的逻辑：父路由(path="/")渲染MainLayout，子路由在布局内部的Switch中渲染，这样侧边栏作为布局的一部分，会一直存在，只有主内容区随路由变化。
3. 权限控制的优化：把UserIsAuthenticated包在布局外面，一次性给所有子页面加上认证要求，不用每个页面都单独包裹，代码更简洁。
4. NavLink做侧边栏高亮：如果你的侧边栏需要高亮当前选中的路由，可以用NavLink替代普通的Link，它会自动给匹配的路由添加active类，方便做样式：

// Sidebar组件里的链接示例
<NavLink to="/dashboard" activeClassName="sidebar-link-active">
  仪表盘
</NavLink>
<NavLink to="/map" activeClassName="sidebar-link-active">
  地图
</NavLink>

这样调整之后，除了登录页之外，其他页面都会自动显示侧边栏，而且侧边栏会持续渲染不会随路由切换而重新加载，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Pablo Estrada