ReactRouterV4 -> V6的升级差异点

Lniev
169 阅读7分钟

以下是 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 4React Router 6差异说明
主要组件Switch, Route, Link, NavLink, Redirect, withRouterRoutes, Route, Link, Navigate, Outlet, useNavigateReact 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。

详细说明

  1. 主要组件：

    • React Router 4 使用 Switch 组件来处理路由匹配，只渲染第一个匹配的组件。
    • React Router 6 使用 Routes 组件，会渲染所有匹配的组件，更加灵活。

  2. 路由配置：

    • React Router 4 使用 Switch 和 Route 组件嵌套定义路由。
    • React Router 6 使用 Routes 和 Outlet 实现嵌套路由。

  3. 导航方式：

    • React Router 4 使用 history.push 或 this.props.history.push 进行导航。
    • React Router 6 使用 useNavigate Hook 或 Navigate 组件进行导航。

  4. 重定向：

    • React Router 4 使用 Redirect 组件进行重定向。
    • React Router 6 使用 Navigate 组件进行重定向，设置 replace={true}。

  5. 路由参数：

    • React Router 4 使用 this.props.match.params 获取路由参数。
    • React Router 6 使用 useParams Hook 获取路由参数。

  6. 查询参数：

    • React Router 4 使用 this.props.location.search 获取查询参数。
    • React Router 6 使用 useSearchParams Hook 获取和设置查询参数。

  7. 高阶组件：

    • React Router 4 使用 withRouter 高阶组件为组件注入路由相关属性。
    • React Router 6 使用 useNavigate、useParams、useSearchParams 等 Hook 替代。

  8. 精确匹配：

    • React Router 4 使用 exact 属性进行精确匹配。
    • React Router 6 默认支持精确匹配，路径末尾添加 /* 表示精确匹配。

  9. 嵌套路由：

    • React Router 4 使用 Switch 和 Route 嵌套定义路由。
    • React Router 6 使用 Routes 和 Outlet 实现嵌套路由。

  10. 错误处理：

    • React Router 4 无内置错误处理机制。
    • React Router 6 支持 ErrorBoundary 组件进行错误处理。

  11. 代码分割：

    • React Router 4 使用 React.lazy 和 Suspense 进行代码分割。
    • React Router 6 支持 React.lazy 和 Suspense，并提供了更好的路由级别代码分割支持。

  12. 性能优化：

    • React Router 4 无明显性能优化。
    • React Router 6 包体积减小，性能优化。

  13. 配置式路由：

    • React Router 4 不支持配置式路由。
    • React Router 6 支持使用 createBrowserRouter 和 RouterProvider 定义配置式路由。

  14. 大小写敏感性：

    • React Router 4 使用 sensitive 属性控制大小写敏感性。
    • React Router 6 使用 caseSensitive 属性控制大小写敏感性。

  15. Link 和 NavLink：

    • React Router 4 使用 <NavLink> 用于导航链接，设置 activeClassName 或 activeStyle 属性。
    • React Router 6 使用 <Link> 既可以用于普通链接，也可以用于导航链接，设置 className 和 style 属性。

  16. 历史记录管理：

    • React Router 4 使用 history 对象管理历史记录。
    • React Router 6 使用 useNavigate Hook 管理历史记录。

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

avatar
文章
阅读
粉丝