React Router：带你从入门到进阶，驾驭应用级路由！

通过 URL 传递参数

在 React Router 中，我们可以通过 URL 来传递参数。这对于动态加载数据或在组件之间传递信息非常有用。

为了通过 URL 传递参数，我们需要在路由路径中使用冒号 (:) 来表示参数。例如，以下路由路径允许我们传递一个名为 "id" 的参数：

/users/:id

当用户访问该路由时，React Router 会将 "id" 参数的值存储在 props.match.params.id 中。我们可以通过在组件中使用 props.match.params.id 来获取该参数的值。

在组件中获取参数

在组件中，我们可以通过以下三种方式来获取 URL 中的参数：

1. 使用 props.match.params 对象。

2. 使用 useParams() 钩子。

3. 使用 useLocation() 钩子。

props.match.params 对象包含了所有通过 URL 传递的参数。例如，以下代码获取了 "id" 参数的值：

const id = props.match.params.id;

useParams() 钩子返回一个包含所有通过 URL 传递的参数的对象。例如，以下代码获取了 "id" 参数的值：

const { id } = useParams();

useLocation() 钩子返回一个包含当前 URL 信息的对象。我们可以通过 useLocation().pathname 来获取当前 URL。例如，以下代码获取了 "id" 参数的值：

const id = useLocation().pathname.split('/')[2];

路径的正则模糊匹配规则

React Router 还支持使用正则表达式来匹配路径。这对于创建动态路由非常有用。

为了使用正则表达式来匹配路径，我们需要在路由路径中使用圆括号 (()) 来表示正则表达式。例如，以下路由路径使用正则表达式来匹配一个数字：

/users/(\d+)

当用户访问该路由时，React Router 会将正则表达式匹配到的值存储在 props.match.params 对象中。例如，以下代码获取了 "id" 参数的值：

const id = props.match.params.id;

嵌套路由

嵌套路由允许我们在一个路由中嵌套另一个路由。这对于创建复杂的应用程序非常有用。

为了创建嵌套路由，我们需要在父路由中使用 <Route> 组件来定义子路由。例如，以下代码定义了一个名为 "users" 的父路由，并在其中嵌套了一个名为 "profile" 的子路由：

<Route path="/users">
  <Route path="profile" component={Profile} />
</Route>

当用户访问 /users/profile 路由时，React Router 会首先匹配父路由，然后匹配子路由。父路由的组件（在本例中是 Users 组件）将作为子路由组件（在本例中是 Profile 组件）的父组件。

总结

React Router 是一个强大的工具，它可以帮助我们管理应用中的页面跳转和路由。在本文中，我们学习了如何通过 URL 传递参数、在组件中获取参数、使用正则表达式来匹配路径以及创建嵌套路由。这些知识将帮助我们创建更加复杂的和动态的 React 应用。