升级react-router-dom从v5到v6遇多类路由错误，求修复方案

针对你遇到的三个错误，以下是具体的修复方案：

1. 修复 "Function components cannot be given refs" 警告 #

React Router v6 中的 HashRouter 是函数组件，不再支持通过 ref 属性获取历史对象。移除入口文件中 HashRouter 的 ref 绑定：

修改入口组件代码：

// 移除 history ref 的导入（如果不再使用）
import store from './store' // 去掉 , { history }

// ...

root.render(
  <React.StrictMode>
    <ErrorBoundary>
      <Provider store={store}>
        <HashRouter> {/* 移除 ref={history} */}
          <GlobalStyles />
          <App />
        </HashRouter>
      </Provider>
    </ErrorBoundary>
  </React.StrictMode>
)

如果需要在组件外使用路由导航，建议在组件内部使用 useNavigate 钩子，或者通过创建自定义路由上下文实现全局访问。

2. 修复 "Matched leaf route at location '/' does not have an element" 错误 #

React Router v6 不再使用 render/component 属性，改用 element 指定路由渲染的组件。同时，exact 属性已被移除（v6 路由默认精确匹配）。

修改 App 组件中的路由映射：

{routes
  .map((route) => ({
    ...route,
    component: appInitialized
      ? googleAnalyticsRegisterView(route.component)
      : route.component,
  }))
  .map((route, i) => {
    const Container = route.private ? AppContainer : AuthContainer
    return (
      <Route
        key={i}
        path={route.path}
        {/* 移除 exact={route.exact} */}
        element={ // 替换 render 为 element
          <Container>
            <route.component />
          </Container>
        }
      />
    )
  })}

路由组件所需的参数（如 params、navigate）现在通过 useParams、useNavigate 等钩子获取，无需手动传递。

3. 修复 "[Navigate] is not a component" 错误 #

Navigate 组件不能直接作为 Routes 的子元素，必须包裹在 Route 中。使用通配符路径 path="*" 作为兜底路由：

修改 App 组件中的 Navigate 部分：

<Routes>
  {/* ... 其他路由 ... */}
  <Route path="*" element={<Navigate to={token ? '/home' : '/'} />} />
</Routes>

这个兜底路由会匹配所有未被定义的路径，并根据用户是否登录重定向到对应页面。

额外注意事项 #

• 路由配置中的 private 属性依赖 localStorage.getItem('tsu')，建议将此逻辑移到组件内部（如在 AppContainer 中判断登录状态，未登录则重定向），避免路由配置在初始化时就固化权限。

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