react-router

React Router是React JavaScript库的一个轻量级、功能齐全的路由库。React Router在React运行的任何地方运行；在web、服务器（使用node.js）和React Native上。
Weekly Downloads: 8,717,240
star:48.5k
last publish: 12 days ago
https://github.com/remix-run/react-router

如果您是React Router的新手，我们建议您从教程开始。

如果要从v5（或v4，与v5相同）迁移到v6，请查看迁移指南。如果您要从Reach Router迁移，请查看Reach路由器的迁移指南。如果需要查找v5的代码，它位于v5分支上。

欢迎来到教程！我们将构建一个小型但功能丰富的应用程序，让您可以跟踪联系人。如果你跟随我们，我们预计需要30-60m的时间。

👉 每次你看到这个，就意味着你需要在应用程序中做一些事情！

剩下的只是为了你的信息和更深的理解。让我们开始吧。

安装程序

如果你不打算使用自己的应用程序，可以跳过此部分

在本教程中，我们将使用Vite作为bundler和dev服务器。你需要Node。为npm命令行工具安装的js。

👉️ 打开终端，用Vite启动一个新的React应用程序：
您应该能够访问终端中打印的URL：

我们已经为本教程准备了一些预先编写的CSS，因此我们可以继续关注React Router。你可以随意苛刻地评判，也可以自己写😅 （我们做了一些在CSS中通常不会做的事情，以便本教程中的标记尽可能保持最小。）

👉 将此处找到的教程CSS复制/粘贴到src/index.CSS
本教程将创建、读取、搜索、更新和删除数据。一个典型的web应用程序可能会与您的web服务器上的API进行对话，但我们将使用浏览器存储并伪造一些网络延迟来保持关注。这些代码都与React Router无关，所以只需继续复制/粘贴即可。
👉 将此处找到的教程数据模块复制/粘贴到src/contacts.js中

👉 删除src/中未使用的文件，您只剩下以下文件：

如果你的应用程序正在运行，它可能会瞬间崩溃，继续运行😋. 有了这些，我们就可以开始了！

添加路由器

首先要做的是创建一个浏览器路由器并配置我们的第一条路由。这将为我们的web应用程序启用客户端路由。

JSX路由

对于我们的最后一个技巧，许多人喜欢用JSX配置他们的路由。您可以使用createRoutesFromElements实现这一点。在配置路由时，JSX或对象之间没有功能差异，这只是一种风格偏好。

就是这样！感谢您尝试React Router。我们希望本教程为您建立良好的用户体验提供一个坚实的开端。使用React Router可以做更多事情，所以请确保查看所有API😀