从Reach Router迁移到React Router v6的完整指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00797/article/details/148324529

从Reach Router迁移到React Router v6的完整指南

前言

React Router作为React生态中最流行的路由解决方案，其v6版本带来了许多重大改进。本文将详细介绍如何从Reach Router平滑迁移到React Router v6，帮助开发者理解两者之间的差异以及迁移策略。

为什么要迁移？

React Router v6在设计时充分考虑了Reach Router的优点，并在此基础上进行了优化：

更小的包体积：比Reach Router还要小
保留了最佳特性：嵌套路由、排名路径匹配和简化的navigate API
现代化API设计：全面拥抱React Hooks
更好的并发模式支持：为Suspense和并发模式提供更好支持
更合理的默认行为：不再默认处理焦点管理

实际上，React Router v6可以看作是Reach Router v2的理想形态，因此官方决定不再单独开发Reach Router v2。

迁移策略概述

迁移过程分为两个阶段：

非破坏性更新：可以逐步完成，不影响现有功能
破坏性更新：需要一次性完成，涉及API的重大变更

非破坏性更新步骤

1. 升级到React 16.8+

React Router v6大量使用Hooks，因此需要确保React版本至少为16.8。

2. 升级到@reach/router v1.3.3

npm install @reach/router@latest

3. 逐步迁移到Hooks API

可以逐个组件进行迁移，无需一次性完成整个应用。

旧版方式（通过props获取路由数据）：

function User(props) {
  let { userId, assignmentId, location, navigate } = props;
  // ...
}

新版方式（使用Hooks）：

import { useParams, useLocation, useNavigate } from "@reach/router";

function User() {
  let { userId, assignmentId } = useParams();
  let location = useLocation();
  let navigate = useNavigate();
  // ...
}

优势：

避免props污染
更清晰的代码结构
便于TypeScript类型推断
减少组件树的prop drilling

4. 添加LocationProvider

虽然Reach Router不强制要求，但React Router v6需要顶层LocationProvider。

import { LocationProvider } from "@reach/router";

ReactDOM.render(
  <LocationProvider>
    <App />
  </LocationProvider>,
  el
);

优势：

更好的tree-shaking支持
统一的路由监听机制
为后续迁移做准备

破坏性更新步骤

这部分需要一次性完成整个应用的更新。

1. 安装React Router v6

npm install react-router@6 react-router-dom@6

2. 替换LocationProvider为BrowserRouter

import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  el
);

3. 替换Router为Routes

// 旧版
import { Router } from "@reach/router";
<Router>
  <Home path="/" />
</Router>

// 新版
import { Routes, Route } from "react-router-dom";
<Routes>
  <Route path="/" element={<Home />} />
</Routes>

4. 替换default路由为通配符路径

// 旧版
<Router>
  <NotFound default />
</Router>

// 新版
<Routes>
  <Route path="*" element={<NotFound />} />
</Routes>

5. 处理重定向逻辑

React Router v6移除了<Redirect/>组件，建议在服务器层面处理重定向。

原因：

客户端重定向无法设置正确的HTTP状态码
避免在客户端和服务器重复配置
更符合Web标准

替代方案：

服务器配置（推荐）：

// firebase.json示例
{
  "hosting": {
    "redirects": [
      {
        "source": "/dashboard",
        "destination": "/events",
        "type": 301
      }
    ]
  }
}

自定义重定向组件（临时方案）：

function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
}

6. 替换Link的getProps

使用新的active状态处理方式：

精确匹配：

function ExactNavLink(props) {
  return (
    <Link
      className={({ isActive }) => 
        isActive ? "active" : ""
      }
      {...props}
    />
  );
}

部分匹配：

function PartialNavLink(props) {
  let match = useMatch(props.to + "/*");
  return (
    <Link className={match ? "active" : ""} {...props} />
  );
}

7. useMatch API变更

// 旧版
let { uri, path, eventId } = useMatch("/events/:eventId");

// 新版
let { url, path, params: { eventId } } = useMatch("/events/:eventId");

主要变化：

uri 重命名为 url
参数移动到独立的params对象中

8. 移除Match组件

可以使用自定义Hook替代：

function Match({ path, children }) {
  let match = useMatch(path);
  let location = useLocation();
  let navigate = useNavigate();
  return children({ match, location, navigate });
}

9. 服务器端渲染变更

// 旧版
import { ServerLocation } from "@reach/router";
<ServerLocation url={req.url}>
  <App />
</ServerLocation>

// 新版
import { StaticRouter } from "react-router-dom/server";
<StaticRouter location={req.url}>
  <App />
</StaticRouter>