React嵌套路由实现方法 访问/users/add路径失效问题排查

你当前配置存在3个核心问题，直接导致/users/add路径无法正常匹配：

• 根路由层给/users路径加了exact精确匹配限制。当访问/users/add时，路径和/users不完全相等，根路由的Switch根本不会渲染IndexUser组件，你写在Users模块内的所有子路由逻辑从入口就没有被加载，自然无法生效。
• 嵌套路由层级重复挂载了Router组件。react-router-dom的路由上下文是基于单一根Router生成的，只需要在应用最顶层（App.js层级）挂载一次Router即可，在子组件里重复嵌套Router会打乱路由匹配的上下文，导致子路由的路径计算逻辑错乱。
• 跳转链接使用了原生<a>标签，会触发浏览器整页刷新，破坏单页应用的路由状态；同时JSX中用原生class写类名也不符合React的语法要求，会触发控制台警告。

1. 调整App.js的根路由配置，去掉/users路径的exact限制，让所有/users前缀的路径都能正常加载Users模块组件：

// App.js 修正后核心路由逻辑
<Router>
  <Header />
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/users" component={IndexUser} />
  </Switch>
</Router>

2. 调整Users/index.js的内部逻辑：移除多余的Router嵌套，替换原生a标签为react-router提供的Link组件，修正JSX类名写法，使用路由匹配API简化子路由路径配置：

// Users/index.js 修正后核心逻辑
import { Link, Route, Switch, useRouteMatch } from 'react-router-dom';

export default class IndexUser extends Component {
  render() {
    // 复用当前路由的基础匹配路径，避免硬编码路径出错
    const { path } = useRouteMatch();
    return (
      <div>
        {/* 修正JSX类名写法 */}
        <div className="top-title">
          {/* 替换原生a标签为Link，实现无刷新单页跳转 */}
          <Link to="/users">User Section</Link>
          <Link to="/users/add">Create new User</Link>
        </div>
        <Switch>
          <Route exact path={`${path}/viewusers`} component={ViewUser} />
          <Route path={`${path}/add`} component={AddUser} />
        </Switch>
      </div>
    );
  }
}

完成上述调整后，访问localhost:3000/users/add会正常加载Add组件，点击模块内的导航链接也会实现无刷新路由切换，不会出现整页重载的问题。如果需要/users路径默认展示用户列表页面，只需要在Users模块的Switch内追加一条exact path={path}的路由，将组件指向ViewUser即可。

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