首页 > 其他分享 >react-router-dom 6.4版本的尝鲜和总结

react-router-dom 6.4版本的尝鲜和总结

时间：2024-06-23 22:27:48浏览次数：28  
标签：React dom react 6.4 router 组件 Router 路由

1. 版本概述

1.1 版本发布背景

React Router 6.4 版本是继6.0大版本更新之后的又一重要里程碑。此版本发布于2024年，旨在进一步优化开发者体验，提供更加强大和灵活的路由功能。6.4版本在前一版本的基础上，引入了新的数据抽象，增强了导航钩子，使得UI与数据的同步更加容易。

1.2 主要功能与改进

React Router 6.4版本带来了多项新特性和改进，主要包括：

  • 数据抽象：引入了新的数据抽象机制，允许开发者更高效地读取、写入和同步路由数据。
  • 导航钩子增强：导航钩子得到了增强，提供了更多的灵活性和控制力，使得在导航过程中处理数据变得更加简单。
  • 性能优化：6.4版本对性能进行了优化，减少了不必要的渲染，提高了应用的响应速度和流畅度。
  • 更好的类型支持：改进了对TypeScript的支持，使得使用React Router时类型检查更加严格和准确。
  • 文档和示例更新：随着新功能的加入，React Router的官方文档和示例也进行了相应的更新，以帮助开发者更好地理解和使用新特性。

这些改进和特性的加入，使得React Router 6.4成为了构建React应用时的一个强大工具，无论是在功能上还是在性能上都为开发者提供了更多的选择和便利。

2. 安装与配置

2.1 安装命令

React Router 6.4版本的安装可以通过npm或yarn包管理工具进行。首先，确保你的项目中已经安装了React Router 6.4或更高版本。如果尚未安装，可以通过以下命令快速安装：

npm install react-router-dom@latest

或者，如果你使用yarn作为包管理器：

yarn add react-router-dom@latest

2.2 基本配置步骤

安装完成后，你需要按照以下步骤在你的React应用中配置React Router 6.4：

  1. 引入必要的组件：在你的应用入口文件，通常是index.js或App.js，引入React Router 6.4的核心组件和函数。
import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route, Link } from 'react-router-dom';
  1. 定义路由：使用createBrowserRouter和createRoutesFromElements定义你的应用路由。你可以将路由定义为对象数组或使用JSX元素。
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
      {/* 更多路由定义 */}
    </Route>
  )
);
  1. 设置路由提供者：在应用的最顶层组件中，使用RouterProvider包裹你的应用，并传入router配置。
function App() {
  return (
    <RouterProvider router={router}>
      <Navigation />
      {/* 其他组件 */}
    </RouterProvider>
  );
}
  1. 导航和链接：使用<Link>组件在应用中创建导航链接，使用useNavigate钩子进行编程式导航。
// 使用<Link>组件
<Link to="/about">About</Link>

// 使用useNavigate钩子
import { useNavigate } from 'react-router-dom';

function SomeComponent() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/about');
  }
  return (
    <button onClick={handleClick}>Go to About</button>
  );
}
  1. 数据加载：利用新的数据抽象机制，在路由定义中使用loader函数进行数据预加载。
<Route path="/user/:id" element={<User />} loader={async (args) => {
  const response = await fetch(`/api/user/${args.params.id}`);
  return response.json();
}} />

通过遵循上述步骤，你可以顺利地在React应用中集成React Router 6.4，享受到它带来的新特性和改进。

3. 主要组件与用法

3.1 BrowserRouter与HashRouter

React Router 6.4版本中，BrowserRouter和HashRouter是两种常用的路由组件，它们提供了不同的路由实现方式。

  • BrowserRouter：使用HTML5的history API来实现路由。它能够感知浏览器的前进和后退操作，支持服务器端渲染（SSR）。BrowserRouter适用于大多数现代Web应用，特别是那些需要SEO优化的场景。
import { BrowserRouter } from 'react-router-dom';

const router = createBrowserRouter(createRoutesFromElements(
  <Route path="/" element={<App />}>
    {/* 路由定义 */}
  </Route>
));

function App() {
  return (
    <BrowserRouter router={router}>
      {/* 应用组件 */}
    </BrowserRouter>
  );
}
  • HashRouter：使用URL的hash部分来实现路由跳转。这种方式不依赖于服务器配置，适用于简单的单页应用，或者那些不支持HTML5 history API的旧浏览器环境。
import { HashRouter } from 'react-router-dom';

function App() {
  return (
    <HashRouter>
      {/* 应用组件 */}
    </HashRouter>
  );
}

3.2 Routes与Route

Routes和Route是React Router中定义路由结构的基本组件。

  • Routes：作为路由的容器，包裹所有的Route组件。它负责匹配URL路径，并渲染对应的组件。
import { Routes } from 'react-router-dom';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      {/* 更多路由 */}
    </Routes>
  )
);
  • Route：定义具体的路由规则。每个Route组件都需要一个path属性来指定URL路径，以及一个element属性来指定渲染的组件。
import { Route } from 'react-router-dom';

// 使用对象数组定义路由
const routes = createRoutesFromElements(
  <Route path="/" element={<Home />} />,
  <Route path="/about" element={<About />}>,
  {/* 更多路由定义 */}
);

// 或者使用JSX元素定义路由
<Route path="/" element={<App />}>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />
  {/* 更多路由定义 */}
</Route>

使用Routes和Route，你可以灵活地定义应用的路由结构，并通过React Router 6.4的新特性，如数据抽象和导航钩子，来增强路由的功能性和用户体验。

4. 导航与路由匹配

4.1 链接导航

链接导航是React Router中最基本的导航方式，通过<Link>组件实现。<Link>组件可以创建一个可点击的链接，当用户点击时，会触发路由的跳转而无需重新加载页面。

  • 基本用法：<Link>组件接受一个to属性，该属性指定了目标路由的路径。
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link `|` <Link to="/about">About</Link>
    </nav>
  );
}
  • 导航属性：除了to属性，<Link>还支持其他属性，如replace用于替换当前条目而不是向历史添加新条目，state用于传递额外的状态信息给目标路由。
<Link to="/contact" state={{ from: 'about' }}>Contact</Link>
  • 活动链接：使用NavLink可以在路由匹配时添加特殊的样式，以表示当前的活跃路由。
import { NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <NavLink to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
    </nav>
  );
}

4.2 编程式导航

编程式导航允许你通过代码来控制路由的跳转，这种方式不依赖于用户的点击事件。React Router 6.4提供了useNavigate钩子来实现编程式导航。

  • 使用useNavigate：在组件内部使用useNavigate可以获取一个导航函数，该函数可以用来跳转到指定的路由。
import { useNavigate } from 'react-router-dom';

function Profile() {
  let navigate = useNavigate();

  function goToHome() {
    navigate('/');
  }

  return (
    <button onClick={goToHome}>Go Home</button>
  );
}
  • 导航选项：navigate函数接受第二个参数，一个包含导航选项的对象，例如replace: true可以替换当前历史条目。
navigate('/login', { replace: true });
  • 路由对象导航：除了字符串路径，navigate还可以接受一个路由对象，这在处理动态路由时非常有用。
navigate({
  pathname: '/user',
  search: '?query=123',
  state: { ref: 'nav' },
});
  • 后退和前进：除了跳转到新的路由，useNavigate还可以用来实现后退或前进到历史中的特定条目。
// 后退到上一个路由
navigate(-1);

// 前进到下一个路由
navigate(1);

通过链接导航和编程式导航，React Router 6.4为开发者提供了灵活的路由控制方式，无论是响应用户操作还是基于应用逻辑的内部导航，都能轻松实现。

5. 嵌套路由与Outlet

5.1 嵌套路由配置

嵌套路由是React Router 6.4中一个强大的功能，它允许开发者在应用中创建多层次的导航结构。这种结构对于构建复杂的应用界面非常有用，例如具有多个子页面和子组件的仪表板或管理面板。

  • 定义嵌套路由：在React Router 6.4中，你可以使用Route组件的children属性来定义嵌套路由。
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route index element={<Home />} />
      <Route path="dashboard" element={<Dashboard />}>
        <Route path="overview" element={<Overview />} />
        <Route path="settings" element={<Settings />} />
        {/* 更多嵌套路由 */}
      </Route>
      {/* 其他路由定义 */}
    </Route>
  )
);

在这个例子中，/dashboard路由有两个子路由：/overview和/settings，它们都是/dashboard路由的子页面。

  • 配置路由层级：在父路由中使用element属性来指定一个组件，这个组件将作为子路由的容器。
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* 使用Outlet来渲染嵌套的子路由 */}
      <Outlet />
    </div>
  );
}

5.2 使用Outlet

Outlet组件是React Router 6.4中用于渲染当前路由匹配的组件的占位符。在嵌套路由的上下文中，Outlet允许你插入子路由的组件。

  • 基本用法：在父组件中，你可以放置一个Outlet组件，它将显示与当前URL匹配的子路由组件。
function App() {
  return (
    <RouterProvider router={router}>
      <Navigation />
      <Outlet /> {/* 这里将显示嵌套的子路由组件 */}
    </RouterProvider>
  );
}
  • 动态路由匹配：Outlet也支持动态路由。当URL包含动态参数时，Outlet将渲染匹配该参数的路由组件。
<Route path="/user/:id" element={<UserDetail />} />

在这个例子中，如果URL是/user/123，Outlet将渲染UserDetail组件，并传递{id: '123'}作为参数。

  • 组合使用：你可以在应用的多个层次上使用Outlet，以创建复杂的嵌套视图。
function Dashboard() {
  return (
    <div>
      <Sidebar />
      <main>
        <Outlet /> {/* 渲染顶层路由 */}
      </main>
    </div>
  );
}

function UserDetail() {
  return (
    <div>
      <h1>User Detail</h1>
      <Outlet /> {/* 可以进一步渲染更深层次的嵌套路由 */}
    </div>
  );
}

通过这种方式，Outlet组件提供了一种灵活的方法来组织和渲染嵌套路由，使得开发者能够构建出具有深层导航结构的复杂用户界面。

6. URL参数与查询

6.1 使用useParams钩子

useParams是一个在React Router 6.4中用于访问路由参数的钩子。它允许你在组件中获取URL中的动态参数，例如用户ID或文章的slug。

  • 基本用法：在组件内部使用useParams可以获取当前路由的参数。
import { useParams } from 'react-router-dom';

function User() {
  let params = useParams();
  console.log(params); // { id: '123' }
  // 假设URL是/user/123
}
  • 访问特定参数：你可以使用点符号来访问参数对象中的特定属性。
let { id } = useParams();
console.log(id); // '123'
  • 与Route组件结合使用：useParams通常与Route组件结合使用，以访问动态路由参数。
<Route path="/user/:id" element={<User />} />

在这个例子中，如果URL是/user/123，User组件将通过useParams获取到id参数。

  • 组件订阅：当URL中的参数发生变化时，使用useParams的组件将会自动重新渲染，以反映新的参数值。

6.2 查询参数处理

React Router 6.4也提供了处理查询参数的能力，允许你解析和访问URL中的查询字符串。

  • 解析查询参数：你可以使用useSearchParams钩子和useParams类似的方式来解析查询参数。
import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  let searchParams = useSearchParams();
  console.log(searchParams); // DOMSearchParams { 'q': 'example' }
  // 假设URL是/search?q=example
}
  • 获取特定查询值：你可以使用get方法来获取查询参数的特定值。
let query = searchParams.get('q');
console.log(query); // 'example'
  • 修改查询参数：你可以通过修改searchParams对象来更新URL的查询字符串，并触发组件的重新渲染。
searchParams.set('q', 'new query');
  • 查询参数与路由结合：查询参数可以与路由定义结合使用，以实现基于搜索或过滤的功能。
<Route path="/search" element={<SearchPage />} />

在这个例子中，SearchPage组件可以使用useSearchParams来访问和处理URL中的查询参数，例如搜索关键词。通过这种方式，React Router 6.4为构建动态和交互式的Web应用提供了强大的路由参数处理能力。

7. 与React Router v5的比较

7.1 主要差异点

React Router v6相较于v5版本，在API设计和使用方式上进行了一些重要的更新和改进。

  • 组件和函数的导入路径：在v5中，组件和钩子通常从react-router-dom导入，而在v6中，推荐从react-router-dom直接导入所有内容，而不是从react-router。

  • 路由配置的变化：v6引入了createBrowserRouter和createRoutesFromElements函数，用以创建路由器和定义路由。这与v5中的<Switch>和<Route>组件用法有所不同。

  • 路由渲染方式：v6中使用element属性替代了v5中的component或render属性，并且<Route>组件不再接受子组件，而是通过element属性传入组件。

  • 导航钩子的增强：v6中的导航钩子提供了更多的灵活性和控制力，允许在导航发生前后执行操作。

  • 数据抽象和加载：v6引入了数据抽象和loader函数，可以在路由级别进行数据预加载，这是v5中没有的特性。

  • useNavigate和useLocation钩子的变更：v6对这些钩子进行了更新，提供了更一致和强大的API。

  • NavLink组件的变化：v6中移除了activeClassName属性，取而代之的是className属性，它接受一个根据路由激活状态返回类名的函数。

  • 类型支持的改进：v6改进了对TypeScript的支持，提供了更严格和准确的类型检查。

7.2 迁移指南

从React Router v5迁移到v6需要考虑以下几个步骤：

  • 更新依赖：首先，需要将react-router-dom的版本更新到v6。

  • API变更：根据v6的API变更，对路由配置代码进行相应的调整，包括路由的创建和渲染方式。

  • 导航钩子：如果项目中使用了useHistory或withRouter，需要迁移到新的useNavigate钩子。

  • NavLink组件：更新NavLink组件的使用，移除activeClassName属性，使用新的className属性。

  • 数据加载：利用v6中的数据抽象和加载特性，对数据加载逻辑进行优化。

  • 类型支持：如果项目使用TypeScript，可以利用v6改进的类型支持进行代码重构，以获得更好的类型检查。

  • 测试和验证：迁移完成后，进行充分的测试以确保路由功能按预期工作。

通过遵循这些迁移指南，可以顺利地将项目从React Router v5升级到v6，同时享受到新版本带来的性能提升和新特性。

如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理。

标签：React,dom,react,6.4,router,组件,Router,路由
From： https://blog.csdn.net/weixin_45046532/article/details/139832872

相关文章

  • vite构建的react+ts项目中使用less
    下载less依赖npminstallless组件很多之间可能有类名相同，导致样式冲突，因此制定导出规则，给类名加上hash值。在vite.config.ts配置中添加以下规则。css:{modules:{hashPrefix:'prefix',generateScopedName:'[name]__[local]__[hash:base64:5]',}......
  • React学习（一）
    React的详细解析:1.React的起源与背景React起源于Facebook的内部项目，旨在解决市场上JavaScriptMVC框架的不足之处。React的早期原型被称为“FaxJS”，由Facebook工程师JordanWalke开发，深受XHP（一个简单的PHPHTML组件框架）影响。React于2011年首次亮相，首次用于Facebook的Newsf......
  • 【React】如何理解 React 的 Fiber？
    理解React源码的Fiber需要对React的内部工作原理和性能优化有深入的了解。Fiber是React16及以后版本中引入的一种新的内部表示形式，用于在React的核心算法中更好地管理组件树的更新和渲染。以下是关于React源码中Fiber的理解：1.为什么需要Fiber？在React......
  • Internet Download Manager（IDM6.41）软件最新版下载及详细安装教程
    ​根据行业数据显示支持多款浏览器，包括IE，Safari，谷歌浏览器，火狐，MSN还有opera ，通过自带的添加浏览器功能能够支持所有浏览器。实际上一键下载所选文件：当在浏览器中用鼠标选择多个链接时，IDM将显示“使用IDM下载”按钮，您也能够在“选项→常规选项卡→在浏览器中自定义下载面板”......
  • 2024 安装体验 React Native
    npxreact-native@latestinitAwesomeProject配置gradlehttps://blog.csdn.net/weixin_44843569/article/details/120873183gradle下载慢https://blog.csdn.net/liyu_ya/article/details/129403811 项目/android->gradle->wrapper->gradle-wrapper.properties......
  • react中useState、useRef、变量之间的区别
    数组件有函数作用域，每次render时，声明的方法会生成新的引用，声明的普通变量会重新声明并赋值初始值，而useRef和useState会保留状态。1.useState组件更新不会改变之前的状态，可以保存状态。值变化，会render，视图会更新，setState是异步的，同一个函数内设置的，不能实时获取到最新的值。使用......
  • 【JavaScript脚本宇宙】终极对决：六大虚拟DOM库横评
    深度剖析：六大虚拟DOM库的奥秘与应用场景前言虚拟DOM（DocumentObjectModel）是用于表示和操作HTML文档的抽象数据结构。虚拟DOM库是构建用户界面的重要工具，它们提供了高效的更新机制、组件化开发等功能，使开发者能够轻松地开发高性能、可维护的Web应用程序。本文将介绍几个流......
  • React脚手架的搭建方法及配置
    react脚手架：npmcreatereact-app项目名称搭建路由：下载包：npmireact-router-dom在router文件夹下新建routerConfig.ts文件，文件中配置路由：import{HashRouter,Routes,Route,Navigate}from'react-router-dom'import{lazy}from'react'letarr=[  {  ......
  • React的服务器端渲染（SSR）和客户端渲染（CSR）有什么区别？
    React的服务器端渲染（SSR）和客户端渲染（CSR）是两种不同的页面渲染方式，它们各自有不同的特点和适用场景：服务器端渲染（SSR）页面渲染:页面在服务器上生成，然后将完整的HTML发送给客户端。SEO:由于搜索引擎爬虫可以直接访问到完整的页面内容，因此对搜索引擎优化（SEO）更为友好。首......
  • 描述React Hooks中的useMemo和useCallback的区别和用途。
    ReactHooksAPI中的useMemo和useCallback都是用于优化性能的钩子，但它们的用途和工作方式略有不同：推荐大家看看我过往的文章useMemouseMemo是一个性能优化钩子，它返回一个记忆化的值。useMemo可以避免在组件渲染时进行昂贵的计算或操作，通过记忆化的方式缓存计算结果，仅当依......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99