我的 React 之旅 React Router

React 路由器

今天的重点是掌握“React Router”，这是在 React 单页应用程序 (SPA) 中构建无缝导航的关键工具。让我带您了解我的学习历程和发现！

**我从使用 React Router 构建导航中学到的东西**

**1.设置和安装：**

要开始使用 React Router，我使用以下命令安装了该库：

npm install react-router-dom

接下来，我导入了必要的模块：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

**2.创建路线：**

我使用“createBrowserRouter”创建路线，定义路径并将它们链接到特定组件。

**例子：**

const router = createBrowserRouter([
  { path: '/', element:  },
  { path: '/profiles', element:  },
  { path: '/profiles/:profileId', element:  },
]);

动态 URL：路由路径：'/profiles/:profileId' 演示了动态路由。它允许我根据 profileId 呈现唯一的个人资料页面。

错误处理：添加 errorElement 可确保导航到无效 URL 的用户看到 404 Not Found 页面。

**3.处理 404 错误：**

我使用 React Router 的 Link 组件创建了一个自定义错误页面（NotFoundPage.jsx）：

Home

这样无需完全刷新浏览器即可导航回主页，从而保持 SPA 体验。

4.动态映射组件：

在 `ProfilesPage.jsx` 中，我使用 `map` 方法为每个个人资料动态生成链接：

{profiles.map((profile) => (
  
    Profile {profile}
  
))}

这使得它具有可扩展性，因为无需重写代码就可以添加新的配置文件。

**5.页面结构：**

每个页面/组件都有特定的用途：

主页：当用户访问/时显示默认内容。

ProfilesPage：列出个人资料的链接。

个人资料页面：显示与特定个人资料相关的动态内容的占位符。

NotFoundPage：处理无效的 URL，增强用户体验。

**6.避免整个页面刷新：**

我了解到使用 ` ` 组件而不是 ` ` 标签可以避免不必要的整页重新加载。这可以使应用程序保持快速和响应。

**7.渲染嵌套视图：**

使用 React Router，我可以通过有效地构建路线轻松地呈现嵌套组件或布局。

**最后的想法**

React Router 是构建丰富且用户友好的 SPA 的必备工具。它能够动态路由、妥善处理错误并确保无缝导航体验，功能非常强大。

CLIS.CC

我的 React 之旅 React Router

React 路由器