了解 React Router v 功能、设置和最佳实践

React Router v6：完整指南

React Router 是 React 应用程序中用于路由的最流行的库。它允许您根据 URL 在不同组件之间导航，提供单页应用程序 (SPA) 体验，无需重新加载整个页面即可更新内容。 React Router v6 是最新的主要版本，与以前的版本相比，引入了一系列改进、简化和新功能。

---

React Router v6 的主要功能和变化

1. 简化的 API

   • React Router v6 引入了一个更简单、更直观的 API 来定义路线和导航，消除了 v5 中存在的许多解决方法的需要。

2. 路由元素（元素）

   • 在 v6 中，路由现在使用 element 属性而不是 component 或 render 属性。这允许您直接传递组件进行渲染。
   • 旧版 (v5)：组件={ComponentName}
   • 新 (v6): element={}

3. 路线匹配

   • 路线匹配现在更加直观。在 v6 中，路由完全匹配，这意味着选择最佳匹配，并且不再需要“包罗万象”的路由来处理动态段。
   • 组件被替换为 ，它用于仅渲染与 URL 匹配的第一个路由。

4. 嵌套路由

   • React Router v6 使定义嵌套路由变得更加容易。现在，您可以使用 element 属性直接定义嵌套路由，而不是使用渲染或子元素进行嵌套。

5. 没有更准确的

   • 在React Router v6中，所有路由默认都完全匹配，因此不需要使用exact属性来指定精确匹配。

6. React 路由器钩子

   • React Router v6 更新了钩子以匹配其新架构，包括 useNavigate、useParams、useLocation、useMatch 和 useNavigate。

---

如何设置 React Router v6

要开始使用 React Router v6，请按照以下步骤操作：

1.安装 React Router v6

您可以使用npm或yarn安装React Router v6。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

2.定义路由和组件

让我们看一个如何在 React Router v6 中设置基本路由的示例。

第 1 步：定义主应用组件

npm install react-router-dom@6
# or
yarn add react-router-dom@6

• ：这取代了以前版本的组件。它确保仅渲染第一个匹配的路线。
• } />：定义主页的路由并渲染 Home 组件。
• ：*通配符用于处理404错误或不匹配的路由，当URL与任何路由都不匹配时渲染NotFound组件。

第 2 步：创建单独的组件

Home.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import NotFound from './NotFound';

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>关于.js</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

---

使用 React Router v6 进行动态路由

为了处理动态路由，例如用户 ID 是 URL 一部分的用户个人资料页面，React Router v6 提供了 useParams 钩子。

第 1 步：定义动态路线

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

说明：

• :userId 是路由路径中的动态段。 useParams 钩子允许您访问 UserProfile 组件中 userId 的值。
• 当您导航到 /user/123 时，UserProfile 组件将渲染并显示 userId 为 123。

---

React Router v6 中的嵌套路由

嵌套路由允许您通过在父路由中定义子路由来构建复杂的布局。

第 1 步：定义父子路由

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

说明：

• 仪表板组件包含用于概述和设置的嵌套路由。
• 父路由中的 /* 确保所有子路由都在 /dashboard 下处理。

---

React Router v6 Hooks

React Router v6 引入了几个用于导航和访问路由信息的钩子：

1. useNavigate：以编程方式导航到不同的路线。
2. useParams：访问动态 URL 参数。
3. useLocation：获取有关当前位置（URL）的信息。
4. useMatch：将当前 URL 与给定路由匹配。
5. useResolvedPath：将路径解析为绝对 URL。

示例：使用Navigate Hook

useNavigate 挂钩允许在您的应用程序中进行编程导航。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

React Router v6 最佳实践

• 默认精确匹配：React Router v6 默认精确匹配路由，无需指定精确即可更轻松地处理路由匹配。
• 使用 element Prop：将 JSX 直接传递给 element prop，而不是使用组件 prop，从而简化代码并减少对渲染函数的需求。
• 嵌套路由：使用嵌套路由通过子路由构建复杂的页面布局，保持代码模块化和可维护性。
• 使用通配符路由处理 404：使用通配符 * 捕获所有不匹配的路由并显示 404 页面或将用户重定向到默认路由。

---

结论

React Router v6 相对于之前的版本引入了多项改进，包括更简单的 API、更好的路由匹配以及对动态和嵌套路由的增强支持。通过利用 useNavigate、useParams 和 useLocation 等钩子，您可以在 React 应用程序中构建强大且灵活的路由系统。

---

以上是了解 React Router v 功能、设置和最佳实践的详细内容。更多信息请关注PHP中文网其他相关文章！