升级至react-router v6后出现Route使用报错该如何解决

报错原因 #

React Router v6 存在两个和旧版本不兼容的核心规则，你的代码触发了约束：

1. 所有 <Route> 组件必须直接作为 <Routes> 的子元素，你外层包裹布局的 <Route> 直接放在 <BrowserRouter> 下，没有被 <Routes> 包裹，所以触发报错。
2. v6 已经完全移除了 <Route> 的 render、component 属性，统一使用 element 属性传入要渲染的组件。

修复代码（和原有功能完全对齐） #

你可以直接移除外层无用的 <Route> 包装，直接渲染布局结构即可：

return (
  <BrowserRouter>
    <div className={`layout ${themeReducer.mode}`}>
      <Sidebar/>
      <div className="layout__content">
        <TopNav/>
        <div className="layout__content-main">
          <Routes>
            <Route path='/' element={<Dashboard/>} />
            <Route path='/activity' element={<Activity/>} />
          </Routes>
        </div>
      </div>
    </div>
  </BrowserRouter>
)

可选的规范写法（适合后续扩展路由） #

如果后续需要新增更多共用布局的路由，推荐用v6的布局路由写法，逻辑更清晰：

// 抽离公共布局组件
function Layout() {
  return (
    <div className={`layout ${themeReducer.mode}`}>
      <Sidebar/>
      <div className="layout__content">
        <TopNav/>
        <div className="layout__content-main">
          {/* 子路由内容占位符 */}
          <Outlet />
        </div>
      </div>
    </div>
  )
}

// 根组件渲染逻辑
return (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Layout />}>
        {/* index属性对应父路由path的默认渲染内容 */}
        <Route index element={<Dashboard/>} />
        <Route path="activity" element={<Activity/>} />
        {/* 后续新增路由直接在这里加即可，自动共用布局 */}
      </Route>
    </Routes>
  </BrowserRouter>
)

注意事项 #

如果你的Sidebar组件之前依赖render方法传入的路由属性（比如location、history等），v6中函数组件可以直接通过useLocation、useNavigate等Hook获取对应能力，如果是类组件可以自行封装withRouter高阶组件包裹Sidebar使用。

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