javascript - react-router-dom的Link组件的realtive属性的区别?

Question

在react-router-dom V6的官方文档中,https://baimingxuan.github.io/react-router6-doc/components/li...

我发现Link组件有一个属性叫relative,值为route或path,我尝试了多种路由嵌套,但依旧无法明白route和path的区别,哪位大佬能帮忙解释一下

Answer 1

在 react-router-dom 的 Link 组件中，relative 属性用于指定链接的解析方式。relative 属性的值可以是 route 或 path，这两种方式在解析链接时有所区别。

1. route:

* 当 `relative` 属性设置为 `route` 时，`Link` 组件会基于当前的路由配置来解析链接。这意味着，它会查找与给定 `to` 属性值匹配的路由定义，并使用该路由的 `path` 属性来生成完整的 URL。* 这种方式的好处是，即使你的路由配置发生了改变（例如，添加或删除了一些路由），只要路由的名称没有改变，`Link` 组件生成的链接仍然会指向正确的位置。* 使用 `route` 方式，你通常会在 `to` 属性中指定路由的名称，而不是完整的路径。

2. path:

* 当 `relative` 属性设置为 `path` 时，`Link` 组件会直接解析 `to` 属性中的路径，并基于当前的 URL 来生成完整的链接。这意味着，它会将 `to` 属性中的路径视为相对于当前 URL 的路径。* 使用 `path` 方式，你需要在 `to` 属性中提供完整的路径（或相对于当前 URL 的路径）。

选择哪种方式取决于你的具体需求。如果你希望链接的解析与路由配置保持同步，那么使用 route 方式可能更合适。如果你希望直接控制链接的路径，那么使用 path 方式可能更合适。

需要注意的是，relative 属性是 react-router-dom V6 中引入的新特性，用于提供更灵活的链接解析方式。在之前的版本中，可能没有这个属性，或者其行为可能有所不同。因此，在查看文档或示例代码时，请确保你正在查阅与你正在使用的 react-router-dom 版本相对应的文档。