v6版本兼容性处理

React Router v6 版本兼容性处理

React Router v6 在路由处理上进行了重大重构，主要变化包括 Switch 组件被移除、useHistory 替换为 useNavigate、以及路由配置方式的改变。本文将详细说明升级过程中需要重点关注的兼容性问题及解决方案。

1. 路由组件替换

v6 中移除了 Switch 组件，改为使用 Routes 组件：

// v5 写法
import { Switch, Route } from 'react-router-dom';
<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
</Switch>

// v6 写法
import { Routes, Route } from 'react-router-dom';
<Routes>
  <Route path="/home" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

2. 导航方式变更

useHistory 被 useNavigate 替代：

// v5
const history = useHistory();
const handleClick = () => {
  history.push('/home');
};

// v6
const navigate = useNavigate();
const handleClick = () => {
  navigate('/home');
};

3. 路由参数访问

v6 中获取路由参数的方式有所改变：

// v5
const { match } = useParams();

// v6
const { params } = useRouteMatch();
// 或者使用 useSearchParams 获取查询参数
const [searchParams] = useSearchParams();

4. 嵌套路由处理

v6 中嵌套路由需要使用 useRoutes 或者直接在组件内定义：

// v6 嵌套路由示例
function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="profile" element={<Profile />} />
      </Route>
    </Routes>
  );
}

5. 自定义 Hook 兼容

建议创建适配器函数来处理兼容性问题：

// 创建适配器
const useNavigateAdapter = () => {
  const navigate = useNavigate();
  return (path, state) => {
    navigate(path, { state });
  };
};

升级时需要逐个检查路由组件，确保所有 API 调用都符合 v6 规范。