v6升级后架构调整

v6升级后架构调整

Quincy891 +0/-0 0 0 正常 2025-12-24T07:01:19 React-Router

React Router v6的发布带来了许多重要变化，特别是在路由配置和组件结构方面。本文将分享我们在项目中进行v6升级后的架构调整经验。

主要变化点

首先，v6移除了Switch组件，改为使用Routes组件，并且路由匹配逻辑从严格匹配改为按顺序匹配。其次，useRouteMatch和useHistory等API被移除或重构，需要使用新的useNavigate和useLocation替代。

架构调整方案

我们首先重构了路由配置文件：

// router.jsx
import { Routes, Route } from 'react-router-dom';
import { Home, About, Profile } from '../pages';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profile" element={<Profile />} />
    </Routes>
  );
}

其次，将导航逻辑统一到自定义Hook中：

// hooks/useNavigation.js
import { useNavigate, useLocation } from 'react-router-dom';

export const useAppNavigation = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  const goTo = (path, state) => {
    navigate(path, { state });
  };
  
  return { goTo, location };
};

最后，更新了组件中的导航调用：

// components/Navigation.jsx
import { useAppNavigation } from '../hooks';

function Navigation() {
  const { goTo } = useAppNavigation();
  
  return (
    <nav>
      <button onClick={() => goTo('/')}>首页</button>
      <button onClick={() => goTo('/about')}>关于</button>
    </nav>
  );
}

通过以上调整，我们的路由系统更加简洁明了，同时保持了良好的可维护性。建议在升级前先备份代码，并逐步迁移路由配置。