react-router支持相对链接吗？

Question

我在这个网址上：

/path1/path2

然后：

<Link to="path2/path3" />

使用此代码，地址栏中的地址更改为：

/path1/path2/path3

它似乎有效：它已经转到最后一个

/

，并为其添加了新路径。但事实上，当它更改地址栏中的 url 时，不会发生导航。

看起来链接必须给出绝对网址？

Answer 1

react-router v4 支持相对路径。

history

库“就像浏览器一样”解析相对路径，以便

<Link to="two" />

或一个

history.push({ pathname: '..', search: 'foo=bar' });

网址

site.com/path/one

将重定向至

site.com/path/two

和

site.com/three?foo=bar

。

但是

NavLink

不适用于相对路径名，因为它无法解析它自己的相对路径（这很重要）。不过，有一些社区包可以实现这一点，但我还没有测试过它们。

或者，这就是我所做的，您可以从父路线（或从上下文

match

）获取一个

router.route.match

对象，并使用它在 NavLink 中构建相对的

to

：

<NavLink to={`${match.url}/three`} />

这样你的组件就可以独立于它的父路由工作。

Answer 2

不支持，但可以轻松生成绝对路径：

<Link to={this.props.location.pathname + '/path3'}>

Answer 3

根据 API 文档，链接必须是绝对的：

to

的

Link

属性必须是位置描述符，它可以是一个字符串（其中明确指出

不支持相对路径

），或者具有

pathname

属性的对象，该属性也是绝对的（根据 其定义）。

有一个讨论相对链接的开放问题，这似乎表明将来可能支持相对路径。

这里所说的一切都适用于

react-router

版本2.x及以上。

Answer 4

是的。使用 react-router-relative-links 库。它是由 React-router 的原作者之一 Ryan Florence 编写的。

要使用您的示例，您需要使用：

{ RelativeLink } = require 'react-router-relative-links'
...
<RelativeLink to="./path3">My link text</RelativeLink>

Answer 5

其实react-router支持相对链接。

给定像 /clients/invoice/123 这样的 URL，行为是：

https://github.com/ReactTraining/react-router/issues/5127

Answer 6

您也可以使用

this.props.match.url

，因为

match

对象具有

url

对象，它是当前加载的路径（您当前所在的页面）。

最后你可以链接

/path1/path2

并构建一个像这样的动态相对路径

this.props.match.url + /path1/path2

示例：

<Link to={{ pathname: this.props.match.url + /path1/path2 }}>Path name</Link>

Answer 7

如果您在单击按钮后进行导航：

import { useNavigate } from "react-router-dom";
...
const navigate = useNavigate();
...
<Button onClick={() => navigate('./next-path')} />