从v5到v6：React Router组件重构踩坑总结

React Router v6的发布带来了许多重要变化，从v5升级到v6需要对路由组件进行重构。本文将分享在实际项目中升级过程中遇到的主要问题和解决方案。

主要变化

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>

路由组件重构

v6中component属性被element替换，且需要使用JSX语法。同时，useHistory被useNavigate替代。

// v5
const Home = () => {
  const history = useHistory();
  const handleClick = () => {
    history.push('/about');
  };
  return <button onClick={handleClick}>跳转</button>;
};

// v6
const Home = () => {
  const navigate = useNavigate();
  const handleClick = () => {
    navigate('/about');
  };
  return <button onClick={handleClick}>跳转</button>;
};

嵌套路由处理

v6中嵌套路由的处理方式也发生了变化，需要使用useRoutes或在组件内部直接定义路由。

// v5
<Route path="/user" component={UserLayout}>
  <Route path="/user/profile" component={Profile} />
</Route>

// v6
<Routes>
  <Route path="/user" element={<UserLayout />}>
    <Route path="profile" element={<Profile />} />
  </Route>
</Routes>