react-router-dom@5.2.0路由异常：访问/student渲染错误组件

问题原因 #

你在路由配置中使用了React Router v5的Route children嵌套写法（直接将组件放在<Route>标签内部），这种模式下无论路径是否匹配，嵌套的组件都会被挂载渲染。当访问/student时，/student/signup对应的<SignupScreen />虽然路径不匹配，但依然会被渲染出来，导致页面显示异常。

解决方案 #

方案1：改用Route的component属性定义路由 #

这是React Router v5的标准写法，只有当路径匹配时才会渲染对应组件：

return (
  <div>
    <BrowserRouter>
      <Context>
        {/* Students */}
        <Route exact path='/student' component={Home} />
        <Route path='/student/signup' component={SignupScreen} />

        {/* Tutors */}
        <Route path='/tutor/signup' component={TSignupScreen} />
      </Context>
    </BrowserRouter>
  </div>
);

方案2：在组件内通过match属性控制渲染（保留children写法时） #

如果必须使用嵌套写法，需要在组件内部通过match判断路径是否匹配，再决定是否渲染内容：

// SignupScreen组件示例
function SignupScreen({ match }) {
  // 路径不匹配时返回null，不渲染组件内容
  if (!match) return null;

  return (
    // 你的组件原有内容
  );
}

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