React/TypeScript路由location.key不唯一导致CRUD表单合并异常

API 探路者

2026-8-29

问题根因

异常的核心原因是违反了React同级元素key必须唯一的规则。
当前代码中给两个并行渲染的<Route>组件同时绑定key={location.key}或同时绑定key={location.pathname}时，同一次路由跳转下，两个Route拿到的key值完全一致。React做虚拟DOM diff时，会错误判定这两个路由对应同一个可复用节点，不会正确卸载上一个路径匹配的表单实例，直接在原节点上更新组件内容，最终出现多个表单合并渲染的问题。
之前“一个Route用location.key、另一个用location.pathname就正常”的现象，本质是刚好凑出了两个不同的key值，碰巧避开了key重复的问题，没有解决根本矛盾，新增第三个路由时必然会再次出现key撞车，异常复现。

修复方案

按推荐优先级从高到低排列：

方案1：为每个路由配置固定唯一key（最稳定）
每个CRUD表单路由对应的组件功能是固定的，完全不需要依赖location动态值生成key，直接给每个Route绑定和自身业务强关联的唯一固定key即可，从根源上避免同级key重复。
修正后的路由代码如下：

return (
  <div className="App d-flex flex-column min-vh-100">
    <Route exact path='/' component={HomePage} />
    <Route
      path={'/(.+)'}
      render={() => (
        <>
          <NavBar />
          <Container style={{ marginTop: '7em' }}>
            <Route exact path='/subject' component={SubjectDashboard} />
            {/* 每个路由配置独立唯一的固定key，和业务模块绑定 */}
            <Route key="country-form" path={['/createSubject', '/manage/:id']} component={CountryForm} />
            <Route exact path='/departments' component={DepartmentDashboard} />
            <Route key="department-form" path={['/createDepartment', '/manages/:id']} component={DepartmentForm} />
            {/* 后续新增任意CRUD路由，只要设置和已有路由不重复的固定key即可，比如
            <Route key="student-form" path={['/createStudent', '/manageStu/:id']} component={StudentForm} />
            */}
          </Container>
        </>
      )}
    />
  </div>
)

这种写法不会出现非预期的组件重挂载，行为完全可控，新增路由时只要保证key不重复就不会出问题。

方案2：拼接业务前缀生成动态key（适合需要路径切换时重置表单状态的场景）
如果业务要求同模块下路径切换（比如从新建页跳转到编辑页）时，强制重挂载组件清空表单状态、重置副作用，可以给动态key拼接当前路由的业务前缀，保证不同Route的key绝对不重复：

{/* key前缀和业务模块绑定，避免不同路由key撞车 */}
<Route key={`country-form-${location.key}`} path={['/createSubject', '/manage/:id']} component={CountryForm} />
<Route key={`department-form-${location.key}`} path={['/createDepartment', '/manages/:id']} component={DepartmentForm} />
{/* 新增路由按同样规则加前缀即可
<Route key={`student-form-${location.key}`} path={['/createStudent', '/manageStu/:id']} component={StudentForm} />
*/}

方案3：用Switch包裹内层路由（路由配置最佳实践）
当前内层路由没有被Switch组件包裹，React Router默认会渲染所有路径匹配的Route，本身就存在多路由同时渲染的风险。引入Switch包裹内层路由后，同一时间只会渲染第一个路径匹配的Route，从渲染逻辑层面避免多组件同时挂载的问题，搭配唯一key使用效果更好：

// 先从react-router-dom引入Switch
import { Route, Switch } from 'react-router-dom';

// 路由配置部分
<Container style={{ marginTop: '7em' }}>
  <Switch>
    <Route exact path='/subject' component={SubjectDashboard} />
    <Route key="country-form" path={['/createSubject', '/manage/:id']} component={CountryForm} />
    <Route exact path='/departments' component={DepartmentDashboard} />
    <Route key="department-form" path={['/createDepartment', '/manages/:id']} component={DepartmentForm} />
    {/* 新增路由直接追加到Switch内即可 */}
  </Switch>
</Container>

注意点

React的key仅要求同级相邻元素唯一即可，不需要全局唯一。只要保证Container下直接子级的这些Route组件key互不重复，就不会出现虚拟DOM diff判定错误导致的组件异常复用问题。
不要给同级组件传入完全相同的动态值作为key，之前两个路由同时使用location.key或location.pathname作为key，属于典型的key使用错误。

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