React Router v6：初学者指南

MrRishuRR

React 事实上的标准路由库。当您需要在具有多个视图的 React 应用程序中导航时，您将需要一个路由器来管理 URL。React Router 会负责这一点，让您的应用程序 UI 和 URL 保持同步。 Pause Next Unmute Current Time 0:15 / Duration 2:00 Fullscreen 本教程向您介绍 React Router v6 以及您可以用它做的很多事情。 目录 介绍 React 是一个流行的 JavaScript 库，用于构建可以提供动态内容的交互式 Web 应用程序。此类应用程序可能有多个视图（也称为“页面”），但与传统的多页面应用程序不同，浏览这些视图不应导致重新加载整个页面。相反，视图在当前页面内内联呈现。 习惯了多页面应用程序的最终用户希望具有以下功能： 每个视图都应该有一个唯一指定该视图的 URL。


这样用户就可以为 URL 添加书签以供以后参考 — 例如，。 浏览器的后退和前进按钮应该 WhatsApp 号码列表按预期工作。 动态生成的嵌套视图最好也有自己的 URL — 例如example.com/products/shoes/101，其中 101 是产品 ID。 路由是使浏览器 URL 与页面上呈现的内容保持同步的过程。React Router 允许您以声明方式处理路由。声明式路由方法允许您通过说“路由应该如下所示”来控制应用程序中的数据您可以将<Route>组件放置在您想要渲染路线的任何位置。由于<Route>以及<Link>我们将要处理的所有其他 API 都只是组件，因此您可以轻松地在 React 中使用路由来启动和运行。 注意：有一个常见的误解，认为 React Router 是 Facebook 开发的官方路由解决方案。实际上，它是由 Remix Software 开发和维护的第三方库。 概述 本教程分为不同的部分。首先，我们将使用 npm 设置 React 和 React Router。然后我们将直接进入一些基础知识




您会发现 React Router 的不同代码演示。本教程涵盖的示例包括： 基本导航路线 嵌套路由 带路径参数的嵌套路由 受保护的路由 与构建这些路线相关的所有概念都将在此过程中进行讨论。 该项目的完整代码可在此 GitHub 存储库中获取。 让我们开始吧！ 设置 React 路由器 要学习本教程，您需要在 PC 上安装最新版本的 Node。如果情况并非如此，请访问 Node 主页并下载适合您系统的正确二进制文件。或者，您可以考虑使用版本管理器来安装 Node.js。我们在这里有一个关于使用版本管理器的教程。 Node 与 npm 捆绑在一起，npm 是 JavaScript 的包管理器，我们将用它来安装一些我们将要使用的库。您可以在此处了解有关使用 npm 的更多信息。 您可以通过从命令行发出以下命令来检查两者是否已正确安装： node -v > 20.9.0 npm -v > 10.1.0 完成后，我们首先使用Create React App工具创建一个新的 React 项目。