React Router 4中/aaa路由对应Topic组件无法渲染的原因咨询

我来帮你拆解一下这个问题的核心原因，其实和React Router的路由注册逻辑直接相关～

首先要明确一个关键规则：React Router里的嵌套路由只有当父组件被渲染时，内部的Route才会被激活生效。也就是说，只有当当前路径匹配到父路由（这里是/topics），Topics组件被挂载到页面上时，它里面的<Route path="/aaa" />才会被注册到路由系统里。

分析你的两种访问场景 #

1. 直接访问http://localhost:3000/aaa：这时候父路由/topics没有被匹配，Topics组件根本不会渲染，里面的/aaa路由自然也不会被注册，所以找不到对应的Topic组件，这个你已经理解啦。
2. 先访问/topics再切换到/aaa：当你从/topics跳转到/aaa时，路径不再匹配/topics，Topics组件会被卸载，它内部的<Route path="/aaa" />也会跟着从路由系统中移除。这时候地址栏的/aaa没有任何已注册的Route对应，所以还是渲染不出Topic组件。

两种解决方案 #

方案1：把/aaa路由放到根层级

如果你希望/aaa是一个独立的路由，直接在根Router下注册它，和Home、Topics同级：

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/topics">Topics</Link></li>
        <li><Link to="/aaa">AAA Topic</Link></li> {/* 新增跳转链接 */}
      </ul>
      <hr/>
      <Route exact path="/" component={Home}/>
      <Route path="/topics" component={Topics}/>
      <Route path="/aaa" component={Topic}/> {/* 在根层级注册路由 */}
    </div>
  </Router>
)

方案2：用match.path实现真正的嵌套路由

如果你原本是想做嵌套路由（比如/topics/aaa这种子路径），那应该利用父组件的match.path来构建子路由路径，这样父路由匹配时子路由才会生效：

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.path}/aaa`}>Go to AAA Topic</Link> {/* 生成嵌套路径的跳转链接 */}
    <Route path={`${match.path}/aaa`} component={Topic}/> {/* 基于父路径构建子路由 */}
  </div>
)

这样访问/topics/aaa时，父组件Topics会保持渲染状态，子路由也能正确匹配并渲染Topic组件。

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