Create React App路由切换时组件不卸载 访问/usuarios/create仍保留Users组件

问题根因 #

该异常由React Router路由匹配逻辑错误导致，核心存在两个配置错误：

1. Switch组件使用不符合规范
   <Switch>组件的作用是仅渲染第一个与当前路径匹配的子<Route>或<Redirect>，要求其直接子元素只能是Route、Redirect组件。你在Switch内部直接插入了<div className="wrapper">等普通DOM元素，导致Switch的排他匹配逻辑完全失效，所有路径匹配的Route都会被渲染。
2. 路由排序错误
   动态路由/usuarios/:userId的匹配范围包含静态路由/usuarios/create：当动态路由放在静态路由前面时，访问/usuarios/create时，React Router会将路径中的create识别为:userId参数的有效值，导致两个路由同时匹配成功。结合Switch失效的问题，两个路由对应的组件就会同时渲染在页面上。
   直接刷新页面时正常是因为首屏加载时路由为全量匹配，会优先匹配到完全符合的静态路由，而客户端Link跳转走的是前端路由的渐进匹配逻辑，所以才会出现两种场景表现不一致的情况。删除/usuarios/:userId动态路由后冲突消失，异常自然解除。

修复方案 #

1. 调整路由结构，保证Switch的直接子节点只有Route/Redirect组件：你可以将公共布局（wrapper、Header、Sidebar等）抽离到外层，或者用嵌套路由的方式包裹鉴权路由，避免普通DOM元素出现在Switch的直接子级中。
2. 调整路由排序规则：所有静态路由放在同层级动态路由的前面，将/usuarios/create、/usuarios/show/:id、/usuarios/edit/:id这类路由放在/usuarios/:userId路由之前。

修复后的参考配置：

function App() {
  return (
    <LoginState>
      <AlertState>
        <DashboardState>
          <DocumentState>
            <UsersState>
              <RelasesState>
                <Router>
                  <Switch>
                    <Route exact path="/login" component={Login}/>
                    <Route exact path="/reset-pwd" component={ResetPwd}/>
                    <Route path="/">
                      <div className="wrapper">
                        <Header />
                        <div className="main-panel">
                          <Switch>
                            <RoutePrivate exact path="/" component={Dashboard}/>
                            <RoutePrivate exact path="/documents" component={Documents}/>
                            <RoutePrivate exact path="/document/:id" component={Document}/>
                            <RoutePrivate exact path="/usuarios" component={Users}/>
                            {/* 静态路由前置 */}
                            <RoutePrivate exact path="/usuarios/create" component={NewUser}/>
                            <RoutePrivate exact path="/usuarios/show/:id" component={User}/>
                            <RoutePrivate exact path="/usuarios/edit/:id" component={EditUser}/>
                            {/* 动态路由后置 */}
                            <RoutePrivate exact path="/usuarios/:userId" component={Users}/>
                            <RoutePrivate exact path="/comunicados" component={Relases}/>
                            <RoutePrivate exact path="/comunicados/send-email/:id" component={Relase}/>
                            <RoutePrivate exact path="/comunicados/:id" component={Relases}/>
                            <RoutePrivate exact path="/docslab" component={DocsLab} />
                          </Switch>
                        </div>
                        <Sidebar />
                      </div>
                    </Route>
                  </Switch>
                </Router>
              </RelasesState>
            </UsersState>
          </DocumentState>
        </DashboardState>
      </AlertState>
    </LoginState>
  );
}

内容的提问来源于stack exchange，提问作者Paul Nuñez