React新手求助：单组件嵌套路由配置报错解决方法

嘿，我来帮你搞定这个嵌套路由的坑！你看到的警告是因为同一个<Route>不能同时使用component和children属性——React Router会直接忽略children，所以你的嵌套路由根本没生效，还抛出了警告。

问题出在哪？ #

看你原来的代码，/register这个路由同时声明了component={Registration}和嵌套的<Route>（也就是children），这就违反了React Router的规则：

// ❌ 错误写法：同时用了component和children
<Route path="/register" component={Registration}>
  <Route path="/register/pet/more" component={App}/>
</Route>

正确的嵌套路由配置方式 #

嵌套路由的核心是：父路由只负责渲染父组件，子路由要放在父组件内部定义，这样父组件可以控制子路由的渲染位置。

步骤1：修改根路由配置

先把嵌套的子路由从根路由里移除，只保留父路由的基础配置：

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={App} />
        <Route exact path="/test" component={App}/>
        {/* 只保留父路由，去掉嵌套的children */}
        <Route path="/register" component={Registration} />
      </div>
    </ConnectedRouter>
  </Provider>, document.getElementById('root'))

⚠️ 注意：父路由不要加exact，否则像/register/pet/more这种子路径就匹配不到父路由了，父组件也不会渲染，子路由自然也出不来。

步骤2：在父组件（Registration）中添加子路由

在Registration组件内部，利用props.match.path（React Router自动传给路由组件的属性）来拼接子路径，这样子路由会自动继承父路由的路径前缀，更灵活：

如果是类组件：

class Registration extends React.Component {
  render() {
    return (
      <div className="registration-page">
        {/* 这里放Registration组件的原有内容 */}
        <h2>用户注册</h2>
        {/* 子路由定义在这里，用match.path拼接路径 */}
        <Route path={`${this.props.match.path}/pet/more`} component={App} />
      </div>
    );
  }
}

如果是函数组件：

function Registration(props) {
  return (
    <div className="registration-page">
      <h2>用户注册</h2>
      <Route path={`${props.match.path}/pet/more`} component={App} />
    </div>
  );
}

这样配置后，当你访问/register/pet/more时，React Router会先匹配到父路由/register，渲染Registration组件，然后在Registration内部匹配到子路由，渲染App组件，完全符合嵌套路由的预期，也不会再出现警告。

额外小提示 #

• 如果你想让子路由在父组件的特定位置渲染，只需要把<Route>放在对应位置即可
• 子路由也可以用相对路径（比如path="pet/more"），效果和${props.match.path}/pet/more一样，但用match.path拼接更清晰，尤其是父路由路径可能变化的情况

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