React Router — 使用 <Link>

Question

在 React Router v6 中，如何使用

<Link>

而不是

useNavigate()

返回上一页。

// Instead of this...
<button onClick={() => navigate(-1)}>

// ...it needs to be this:
const previousPage = ???

<Link to={previousPage}>Go back</Link>

将其更改为

<Link>

将允许我使用

<a href="xxxx">

而不是

<button>

，这是在页面之间创建链接的最方便的方式。 （更多关于按钮与链接的信息）。例如，它允许用户右键单击并在新选项卡中打开页面。

但我不知道要传递给链接什么 URL。

更新：我创建了一个codesandbox来帮助您找到解决方案。

更新 2：根据答案和一些研究，我 创建了一个 GitHub 问题

react-router

更新3：我在下面添加了我自己对此问题的答案。

Answer 1

这不是

react-router-dom@6

中的错误，也不是

Link

真正要做的任何事情，即它只是引擎盖下的锚标记，并作为声明性导航操作链接到路径。这与像

history.go(1)

或

history.back()

（i.e.

history.go(-1)

）这样的命令式操作有根本的不同，在这些命令式操作中，您命令式地在历史堆栈中向前/向后导航。

但是，在

react-router-dom@6

中，您可以相对于当前路径进行导航。

".."

将为当前

Route

组件中渲染的任何

Routes

组件导航“返回”一个路径段。 IE。从

"/destiny"

回到

"/"

，具有相同的

Routes

组件。

示例：

import { Link } from 'react-router-dom';

export default function Destiny() {
  return (
    <div>
      <h1>Destiny Page</h1>
      <Link to={'..'}>Go back</Link>
      <br />
      <Link to="/">Go Home ("/")</Link>
    </div>
  );
}

请注意，这个 不是 相当于

navigate(-1)

，因为它没有通过历史堆栈进行转换，因此它不是真正的后退导航。如果您想进行真正的后退导航，那么您需要向

onClick

添加一个

Link

处理程序，并防止默认事件操作并处理发出命令式后退导航。

示例：

import { useNavigate, Link } from 'react-router-dom';

export default function Destiny() {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Destiny Page</h1>
      <Link
        to={'..'}
        onClick={(e) => {
          e.preventDefault();
          navigate(-1);
        }}
      >
        Go back (-1)
      </Link>
      <br />
      <Link to="/">Go Home ("/")</Link>
    </div>
  );
}

Answer 2

<Link to={-1}>Go Back</Link>

会起作用的。

Answer 3

据我所知，不可能有一个完全可访问的“返回”链接：

  <Link to={-1}>Go back</Link>
  // or
  <button onClick={() => navigate(-1)}>Go back</button>

它无法完全访问有两个原因：

1. 当您直接从第一页（安装时）进入时，单击不起作用。
2. 右键单击（在新选项卡中打开）永远不起作用。

对于1）我找到了解决方法：

const router = useRouter(); // next/router

function handleGoBack() {
   // 💡 Verify if previous page exists before using router.back
    const hasPreviousPage = window.history.length > 1;

    if (hasPreviousPage) {
      router.back();
    } else {
      // fallback to a meaningful route.
      router.push("/");
    }
}

<button onClick={handleGoBack}>
  Go back
</button>

对于2）我没有找到任何解决方案。我的建议是尽可能避免使用

-1

进行“返回”链接，而使用

<Link>

以及可能指向上一页的真实 URL。

Answer 4

如这个答案中关于另一个问题的描述，在React Router 6中通过可访问链接实现返回行为的方法是使用位置状态来存储您想要返回的路径值，然后读取它位于保存链接的组件中。

// COMPONENT 1
const { pathname } = useLocation();
const navigate = useNavigate();
// either of the following
<Link to="/destination" state: { previous: pathname }>
  CLICK ME
</Link>
<Button
  onClick= {() => {
    navigate(
      `/destination`,
      { state: { previous: pathname } }
    )
  }
>
  CLICK ME
</Button>

// COMPONENT 2
const { state: { previous }} = useLocation();
<Link href={ previous }>GO BACK</Link>

Answer 5

尝试使用此方法转到上一页。

<Link to="..">Go Back</Link>

Answer 6

这可能有用...

let url = '\\peviouspagename.js';
let element = <Link to={url}>Go Back</Link>

放置在函数之前的任何位置...

在函数中，您将看到类似：

<div>{element}</div>

脚本通常所在的位置。元素是

<Link>

脚本。单独注明 URL，页面名称即可。您也可以通过将

<div id="hash"></div>

添加到末尾来对其进行哈希处理，如下所示：

let url = '\\peviouspagename.js#hash';

这样做应该会直接转到

<div>

onClick。