ReactRouterV4 -> V6的升级差异点1. API 和组件的变化 useHistory 被移除： React

以下是 React Router 4 升级到 React Router 6 的主要差异改动点，记录一下升级版本所记录的内容，内容不完全仅供参考：

1. API 和组件的变化

useHistory 被移除：

React Router 6 弃用了 useHistory，改用 useNavigate 和 useSearchParams 来实现导航和查询参数管理。

示例：

// React Router 4
import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push('/new-path');

// React Router 6
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/new-path');

Redirect 被移除：

Redirect 组件在 React Router 6 中被移除，改用 Navigate 组件。

示例：

// React Router 4
import { Redirect } from 'react-router-dom';
<Redirect to="/new-path" />

// React Router 6
import { Navigate } from 'react-router-dom';
<Navigate to="/new-path" />

withRouter 被移除：
- withRouter 高阶组件被移除，改用 useNavigate、useParams 和 useSearchParams 等 Hook。

match.params 被移除：

React Router 6 使用 useParams Hook 来获取路由参数。

示例：

// React Router 4
const { id } = this.props.match.params;

// React Router 6
import { useParams } from 'react-router-dom';
const { id } = useParams();

useRouteMatch 被移除：
- useRouteMatch 被移除，改用 useMatch 和 useMatches。

2. 路由匹配机制的变化

路径匹配机制：

React Router 6 引入了更简单直观的路径匹配机制，默认使用 Matching Patterns，不再依赖 path-to-regexp。

示例：

// React Router 4
<Route path="/users/:id" component={UserDetails} />

// React Router 6
<Route path="/users/:userId" element={<UserDetails />} />

exact 和 strict 属性被移除：
- exact 和 strict 属性被移除，路径匹配行为默认更灵活。
- 如果需要精确匹配，可以在路径末尾添加 /*。

3. 路由配置的变化

<Switch> 被 <Routes> 替代：

React Router 6 使用 <Routes> 组件替代 <Switch>，支持渲染所有匹配的路由。

示例：

// React Router 4
<Switch>
  <Route path="/users/:id" component={UserDetails} />
  <Route path="/users" component={UserList} />
</Switch>

// React Router 6
<Routes>
  <Route path="/users/:userId" element={<UserDetails />} />
  <Route path="/users" element={<UserList />} />
</Routes>

component 属性被 element 替代：

Route 组件不再使用 component 属性，改用 element 属性。

示例：

// React Router 4
<Route path="/home" component={Home} />

// React Router 6
<Route path="/home" element={<Home />} />

嵌套路由的变化：

React Router 6 使用 <Outlet> 组件来实现嵌套路由。

示例：

// React Router 4
<Route path="/users">
  <Switch>
    <Route path="/users/:id" component={UserDetails} />
    <Route path="/users" component={UserList} />
  </Switch>
</Route>

// React Router 6
<Routes>
  <Route path="/users" element={<UserList />}>
    <Route path=":userId" element={<UserDetails />} />
  </Route>
</Routes>

4. 导航和链接的变化

<Link> 和 <NavLink> 的变化：

React Router 6 中，<Link> 组件既可以用于普通链接，也可以用于导航链接，支持 className 和 style 属性。

示例：

// React Router 4
<NavLink to="/home" activeClassName="active">
  Home
</NavLink>

// React Router 6
<Link to="/home" className={({ isActive }) => (isActive ? 'active' : '')}>
  Home
</Link>

5. 历史记录管理的变化

历史记录 API 的变化：

React Router 6 使用 useNavigate Hook 管理历史记录，替代了 history 对象。

示例：

// React Router 4
this.props.history.push('/new-path');

// React Router 6
const navigate = useNavigate();
navigate('/new-path');

6. 错误处理的变化

<ErrorBoundary> 的引入：
- React Router 6 支持在路由配置中使用 ErrorBoundary 组件处理错误。

7. 性能优化

代码分割和懒加载：
- React Router 6 支持使用 React.lazy 和 Suspense 进行代码分割，减少初始加载时间。

8. 配置式路由

配置式路由的支持：
- React Router 6 支持配置式路由，可以通过 createBrowserRouter 和 RouterProvider 来定义路由。

9. 其他变化

包体积减小：
- React Router 6 的包体积从 20KB 减小到 8KB。
大小写敏感性：
- sensitive 属性被替换为 caseSensitive。

10. 总结

以下是 React Router 4 和 React Router 6 的详细横向对比表格，涵盖了主要的 API、组件、配置和功能差异：

特性	React Router 4	React Router 6	差异说明
主要组件	`Switch`, `Route`, `Link`, `NavLink`, `Redirect`, `withRouter`	`Routes`, `Route`, `Link`, `Navigate`, `Outlet`, `useNavigate`	React Router 6 引入了新的组件和 Hook，移除了部分旧组件。
路由匹配机制	使用 `path-to-regexp` 进行路径匹配	使用 `Matching Patterns`，更简单直观的路径匹配机制	路径匹配机制发生变化，路径定义更简洁。
路由配置	使用 `Switch` 包裹多个 `Route`，支持嵌套路由	使用 `Routes` 包裹多个 `Route`，支持嵌套路由，嵌套路由使用 `Outlet`	路由配置方式发生变化，嵌套路由的实现方式不同。
导航方式	使用 `history.push` 或 `this.props.history.push` 进行导航	使用 `useNavigate` Hook 或 `Navigate` 组件进行导航	导航方式发生变化，使用新的 Hook 和组件。
重定向	使用 `Redirect` 组件进行重定向	使用 `Navigate` 组件进行重定向，设置 `replace={true}`	重定向方式发生变化，使用新的组件。
路由参数	使用 `this.props.match.params` 获取路由参数	使用 `useParams` Hook 获取路由参数	获取路由参数的方式发生变化，使用新的 Hook。
查询参数	使用 `this.props.location.search` 获取查询参数	使用 `useSearchParams` Hook 获取和设置查询参数	获取和设置查询参数的方式发生变化，使用新的 Hook。
高阶组件	使用 `withRouter` 高阶组件为组件注入路由相关属性	使用 `useNavigate`、`useParams`、`useSearchParams` 等 Hook	高阶组件被移除，使用新的 Hook 替代。
精确匹配	使用 `exact` 属性进行精确匹配	默认支持精确匹配，路径末尾添加 `/*` 表示精确匹配	精确匹配的实现方式发生变化。
嵌套路由	使用 `Switch` 和 `Route` 嵌套定义路由	使用 `Routes` 和 `Outlet` 实现嵌套路由	嵌套路由的实现方式发生变化，使用新的组件。
错误处理	无内置错误处理机制	支持 `ErrorBoundary` 组件进行错误处理	引入了错误处理机制。
代码分割	使用 `React.lazy` 和 `Suspense` 进行代码分割	支持 `React.lazy` 和 `Suspense`，并提供了更好的路由级别代码分割支持	代码分割支持更加完善。
性能优化	无明显性能优化	包体积减小，性能优化	包体积减小，性能有所提升。
配置式路由	不支持配置式路由	支持使用 `createBrowserRouter` 和 `RouterProvider` 定义配置式路由	引入了配置式路由的支持。
大小写敏感性	使用 `sensitive` 属性控制大小写敏感性	使用 `caseSensitive` 属性控制大小写敏感性	属性名称发生变化。
Link 和 NavLink	`<NavLink>` 用于导航链接，设置 `activeClassName` 或 `activeStyle` 属性	`<Link>` 既可以用于普通链接，也可以用于导航链接，设置 `className` 和 `style` 属性	`<NavLink>` 被 `<Link>` 替代，功能合并。
历史记录管理	使用 `history` 对象管理历史记录	使用 `useNavigate` Hook 管理历史记录	历史记录管理方式发生变化，使用新的 Hook。

详细说明

主要组件：
- React Router 4 使用 Switch 组件来处理路由匹配，只渲染第一个匹配的组件。
- React Router 6 使用 Routes 组件，会渲染所有匹配的组件，更加灵活。
路由配置：
- React Router 4 使用 Switch 和 Route 组件嵌套定义路由。
- React Router 6 使用 Routes 和 Outlet 实现嵌套路由。
导航方式：
- React Router 4 使用 history.push 或 this.props.history.push 进行导航。
- React Router 6 使用 useNavigate Hook 或 Navigate 组件进行导航。
重定向：
- React Router 4 使用 Redirect 组件进行重定向。
- React Router 6 使用 Navigate 组件进行重定向，设置 replace={true}。
路由参数：
- React Router 4 使用 this.props.match.params 获取路由参数。
- React Router 6 使用 useParams Hook 获取路由参数。
查询参数：
- React Router 4 使用 this.props.location.search 获取查询参数。
- React Router 6 使用 useSearchParams Hook 获取和设置查询参数。
高阶组件：
- React Router 4 使用 withRouter 高阶组件为组件注入路由相关属性。
- React Router 6 使用 useNavigate、useParams、useSearchParams 等 Hook 替代。
精确匹配：
- React Router 4 使用 exact 属性进行精确匹配。
- React Router 6 默认支持精确匹配，路径末尾添加 /* 表示精确匹配。
嵌套路由：
- React Router 4 使用 Switch 和 Route 嵌套定义路由。
- React Router 6 使用 Routes 和 Outlet 实现嵌套路由。
错误处理：
- React Router 4 无内置错误处理机制。
- React Router 6 支持 ErrorBoundary 组件进行错误处理。
代码分割：
- React Router 4 使用 React.lazy 和 Suspense 进行代码分割。
- React Router 6 支持 React.lazy 和 Suspense，并提供了更好的路由级别代码分割支持。
性能优化：
- React Router 4 无明显性能优化。
- React Router 6 包体积减小，性能优化。
配置式路由：
- React Router 4 不支持配置式路由。
- React Router 6 支持使用 createBrowserRouter 和 RouterProvider 定义配置式路由。
大小写敏感性：
- React Router 4 使用 sensitive 属性控制大小写敏感性。
- React Router 6 使用 caseSensitive 属性控制大小写敏感性。
Link 和 NavLink：
- React Router 4 使用 <NavLink> 用于导航链接，设置 activeClassName 或 activeStyle 属性。
- React Router 6 使用 <Link> 既可以用于普通链接，也可以用于导航链接，设置 className 和 style 属性。
历史记录管理：
- React Router 4 使用 history 对象管理历史记录。
- React Router 6 使用 useNavigate Hook 管理历史记录。

希望这个详细的对比表格能帮助你更好地理解 React Router 4 和 React Router 6 之间的差异。如果有其他问题，欢迎随时提问。