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

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

时间:2024-06-23 22:27:48浏览次数:23  
标签: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.jsApp.js,引入React Router 6.4的核心组件和函数。
import { createBrowserRouter, createRoutesFromElements, RouterProvider, Route, Link } from 'react-router-dom';
  1. 定义路由:使用createBrowserRoutercreateRoutesFromElements定义你的应用路由。你可以将路由定义为对象数组或使用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版本中,BrowserRouterHashRouter是两种常用的路由组件,它们提供了不同的路由实现方式。

  • 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

RoutesRoute是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>

使用RoutesRoute,你可以灵活地定义应用的路由结构,并通过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/123Outlet将渲染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/123User组件将通过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引入了createBrowserRoutercreateRoutesFromElements函数,用以创建路由器和定义路由。这与v5中的<Switch><Route>组件用法有所不同。

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

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

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

  • useNavigateuseLocation钩子的变更:v6对这些钩子进行了更新,提供了更一致和强大的API。

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

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

7.2 迁移指南

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

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

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

  • 导航钩子:如果项目中使用了useHistorywithRouter,需要迁移到新的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可以避免在组件渲染时进行昂贵的计算或操作,通过记忆化的方式缓存计算结果,仅当依......