React Router Switch不渲染组件：点击导航栏后页面空白求助

嘿，我来帮你排查这个问题～

你遇到的空白页面问题，核心原因是路由嵌套的路径不匹配。咱们一步步拆解：

问题出在哪？ #

你的顶层路由配置里，App组件是挂载在/main路径下的：

<Switch>
  <Route exact path="/" component={Splash} />
  <Route path="/main" component={App} />
</Switch>

但App内部的路由和导航链接用的都是绝对路径（比如/aboutme、/models）。当你点击导航链接时，浏览器地址栏变成/aboutme，顶层的Switch会尝试匹配这个路径——但顶层路由里根本没有/aboutme的规则，所以Switch找不到任何要渲染的组件，整个页面就变成空白了（连Header都没了，因为App都没被渲染）。

怎么解决？ #

我们需要让App内部的路由成为/main的嵌套路由，这样点击链接时，既会匹配顶层的/main渲染App（保留Header），又能在App内部渲染对应的子组件。有两种优雅的实现方式：

方式1：用match.path动态生成嵌套路径（推荐）

React Router会给被Route渲染的组件自动传入match对象，其中match.path就是当前父路由的路径（这里就是/main）。我们可以用它来动态生成子路由的路径，这样即使以后父路由路径改变，子路由也不用手动修改。

修改步骤：

1. 更新App组件内的路由：

class App extends React.Component {
  render() {
    // 从props里拿到父路由的match对象
    const { match } = this.props;
    return (
      <div>
        <Header />
        <AppWrapper>
          <Switch>
            {/* 用match.path拼接子路由路径 */}
            <Route path={`${match.path}/aboutme`} component={AboutMe} />
            <Route path={`${match.path}/models`} component={Models} />
            <Route path={`${match.path}/landscapes`} component={Landscapes} />
          </Switch>
          <Footer />
        </AppWrapper>
      </div>
    );
  }
}

2. 更新NavBar里的导航链接：
   因为NavBar是Header的子组件，默认拿不到match对象，我们可以用withRouter高阶组件包裹它，让它自动获取路由相关的props：

// 先导入withRouter
import { withRouter } from 'react-router-dom';

class NavBar extends React.Component {
  render() {
    const { match } = this.props;
    return (
      <div>
        <AppBar position="static" color="default" >
          <Toolbar>
            <Typography type="title" color="inherit">
              {/* 同样用match.path拼接链接地址 */}
              <Link to={`${match.path}/models`}>Models</Link>
            </Typography>
            <Typography type="title" color="inherit">
              <Link to={`${match.path}/landscapes`}>Adventures</Link>
            </Typography>
            <Typography type="title" color="inherit">
              <Link to={`${match.path}/aboutme`}>About Me</Link>
            </Typography>
          </Toolbar>
        </AppBar>
      </div>
    );
  }
}
// 用withRouter包裹组件，注入路由props
export default withRouter(NavBar);

方式2：硬编码嵌套路径（简单直接）

如果不想用动态路径，也可以直接给子路由和链接加上/main前缀：

• App内的路由改成：path="/main/aboutme"、path="/main/models"
• NavBar里的链接改成：to="/main/models"、to="/main/landscapes"

这种方式适合路径固定的场景，但灵活性不如动态路径。

为什么这样改就有效？ #

修改后，点击导航链接时，地址栏会变成/main/models这类路径：

1. 顶层Switch匹配到/main，渲染App组件（所以Header会一直显示）
2. App内部的Switch匹配到/main/models，渲染对应的Models组件
   整个页面的结构就保持完整，不会出现空白了。

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