HOW - React Router Feature 实践（react-router-dom）

news2024/7/7 15:10:59

基本特性

client side routing
nested routes
dynamic segments

比较好理解，这里不赘述。

ranked routes matching

When matching URLs to routes, React Router will rank the routes according to the number of segments, static segments, dynamic segments, splats, etc. and pick the most specific match.

这句话描述了 React Router 在匹配 URL 和路由时的策略，即根据路由的具体性来优先选择最合适的匹配项。让我们逐步解析这句话的含义：

URL 和路由的匹配：
- 当用户访问某个 URL 时，React Router 需要确定哪个路由规则最适合处理该 URL。例如，对于 URL /users/123，React Router 需要决定是匹配 /users/:id 还是其他定义的路由。
路由匹配的考量因素：优先级由高到低
- 路由的段数（Segments）：URL 和路由可以分成多个段（segments），例如 /users/123 有两个段，/users/:id 也有两个段。React Router 会比较 URL 和每个路由的段数，越多的段数一般意味着路由更具体。
- 静态段（Static Segments）：静态段是指在路由中直接指定的固定路径，例如 /users 是一个静态段。React Router 会考虑静态段的数量来确定路由的具体性。
- 动态段（Dynamic Segments）：动态段是指在路由中使用参数化路径，例如 /users/:id 中的 :id 是一个动态段。动态段的存在可能使得路由更灵活但也更具体。
- 通配符（Splat）：通配符（如 *）表示匹配多个路径段，通常用于处理不确定数量的路径部分。
最具体的匹配：
- React Router 会通过比较以上因素来确定哪个路由定义是最具体的匹配。具体的路由定义意味着它能够最准确地匹配当前的 URL，而不会与其他可能的路由定义冲突。
示例：

<Route path="/teams/:teamId" />
<Route path="/teams/new" />

对于 http://example.com/teams/new. 会优先匹配第二个 Route。因为静态段数为 2，更具体。

理解 React Router 的路由匹配策略，特别是根据路由的具体性来优先选择最合适的匹配项，有助于开发者更有效地设计和管理复杂的路由结构。通过正确的路由定义和优先级排序，可以确保应用程序在导航和页面渲染时行为符合预期，并能够灵活地应对各种场景和URL路径。

active links

NavLink

https://reactrouter.com/en/main/components/nav-link

<NavLink
  style={({ isActive, isPending }) => {
    return {
      color: isActive ? "red" : "inherit",
    };
  }}
  className={({ isActive, isPending }) => {
    return isActive ? "active" : isPending ? "pending" : "";
  }}
/>

useMatch

https://reactrouter.com/en/main/hooks/use-match

function SomeComp() {
  const match = useMatch("/messages");
  return <li className={Boolean(match) ? "active" : ""} />;
}

relative links

理解 React Router 中 <Link> 和 <NavLink> 组件相对路径的使用需要考虑它们与 HTML 中 <a> 标签的行为差异，尤其是在嵌套路由场景下的增强行为。

1. 相对路径的使用

HTML <a> 标签：在 HTML 中，使用 <a> 标签时，相对路径通常相对于当前页面的完整 URL。这意味着，相对路径会根据当前页面的路径来构建最终的目标 URL。
```
<a href="about">About</a>
```
- 如果当前 URL 是 http://example.com/home，那么点击上述链接将导航到 http://example.com/about。
React Router 中的 <Link> 和 <NavLink>：在 React Router 中，<Link> 和 <NavLink> 组件可以接受相对路径，但它们的行为略有不同。
```
import { Link, NavLink } from 'react-router-dom';

<Link to="about">About</Link>
<NavLink to="about">About</NavLink>
```
- 这里的 to="about" 是相对路径，相对于当前路由的路径来构建目标 URL。例如，如果当前路由是 /home，那么这两个链接将会导航到 /home/about。

2. 嵌套路由的增强行为

嵌套路由：当应用程序中存在嵌套路由时，React Router 的 <Link> 和 <NavLink> 组件表现出更智能的行为，确保相对路径的正确解析。
```
<Route path="/home">
  <Link to="about">About</Link>
  <NavLink to="about">About</NavLink>
</Route>
```
- 在上述例子中，假设当前路由是 /home，那么 <Link> 和 <NavLink> 组件会基于当前路由的路径 /home 构建相对路径，导航到 /home/about。

3. 优势和注意事项

灵活性和便利性：相对路径的使用使得在应用中链接管理更加灵活和简单，尤其是在处理嵌套路由时。
注意路径解析：确保理解相对路径在不同嵌套层级下的解析规则。React Router 的行为通常是基于当前活动的路由来解析相对路径，而不是简单地相对于根路径。

4. . 和 …

<Route path="/home">
  <Link to=".">About</Link>
  <NavLink to=".">About</NavLink>
</Route>

在上述例子中，假设当前路由是 /home，那么 <Link> 和 <NavLink> 组件会基于当前路由的路径 /home 构建相对路径，导航到 /home。

<Route path="home" element={<Home />}>
  <Route path="project/:projectId" element={<Project />}>
  	<Route path=":taskId" element={<Task />} />
  </Route>
</Route>

Project 中会渲染：

  <Link to="abc">
  <Link to=".">
  <Link to=".."></Link>
  <Link to=".." relative="path">

在上述例子中，假设当前路由是 /home/project/123，那么 <Link> 会基于当前路由的路径构建相对路径，分别导航到 /home/project/123/abc、/home/project/abc、/home、/home/project。

注意后面两个的差异：

By default, the … in relative links traverse the route hierarchy, not the URL segments. Adding relative=“path” in the next example allows you to traverse the path segments instead.