React报错You should not use <Route> outside a <Router>排查

该报错的唯一触发条件是<Route>组件无法获取上层Router组件提供的路由上下文，和你移植的路由守卫业务逻辑无关。90%以上的同类场景为依赖版本不匹配、存在多副本react-router依赖导致的上下文隔离，剩余场景为组件嵌套顺序错误、导入路径错误。

排查修复步骤 #

• 固定依赖匹配版本
  React 16.14.0 环境下的Redux+ConnectedRouter技术栈，路由相关依赖必须严格满足版本对应关系，Visual Studio模板默认拉取的最新版依赖会存在大版本不兼容问题，执行以下命令固定到兼容版本：

  npm uninstall connected-react-router react-router react-router-dom history
  npm install connected-react-router@6.9.3 react-router@5.3.4 react-router-dom@5.3.4 history@4.10.1
  

  版本对应规则：connected-react-router@6.x + react-router@5.x + react-router-dom@5.x + history@4.x 是React 16环境下的唯一兼容组合，更高版本仅支持React 18 + react-router v6，上下文API完全不互通。
• 清理重复依赖副本
  版本混乱时node_modules会留存多份react-router副本，会出现ConnectedRouter使用A副本上下文、Route组件读取B副本上下文的情况，直接触发报错。执行以下命令彻底清理缓存重装依赖：

  rm -rf node_modules package-lock.json yarn.lock
  npm install
  

• 统一路由组件导入路径
  所有路由相关组件的导入来源必须统一，禁止跨包导入混用：
  • ConnectedRouter 统一从connected-react-router导入
  • Route/Switch/Redirect 统一从react-router-dom导入，不要从react-router单独导入
    错误示例（会触发上下文不匹配）：

  // 错误：跨包导入路由组件
  import { Route } from 'react-router'
  

  正确示例：

  import { Route, Switch, Redirect } from 'react-router-dom'
  import { ConnectedRouter } from 'connected-react-router'
  import { createBrowserHistory } from 'history'
  const history = createBrowserHistory()
  

• 校验根组件嵌套顺序
  确认index.tsx的组件嵌套严格遵循以下层级，禁止将App或路由组件放到ConnectedRouter外层：

  // index.tsx 正确结构
  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        {/* App必须位于ConnectedRouter内部 */}
        <App />
      </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
  )
  

• 校验ProtectedRoute实现
  connect包裹路由守卫时不要添加阻断上下文传递的配置，基础可用实现参考：

  import { Route, Redirect } from 'react-router-dom'
  import { connect } from 'react-redux'
  
  const ProtectedRoute = ({ component: Component, isLoggedIn, ...rest }) => {
    return (
      <Route
        {...rest}
        render={(routeProps) => 
          isLoggedIn ? <Component {...routeProps} /> : <Redirect to="/login" />
        }
      />
    )
  }
  
  const mapStateToProps = (state) => ({
    isLoggedIn: state.user.isLoggedIn // 替换为项目内实际的登录状态字段
  })
  
  export default connect(mapStateToProps)(ProtectedRoute)
  

注意：路由配置时Switch下原生Route和自定义ProtectedRoute可以混用，不存在兼容性问题，只要以上步骤校验通过，报错会直接消失。

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