我可以像React-Route这样向Next JS Router添加属性或状态吗？

Question

我想知道是否可以使用Next.JS在Router.router link中添加状态。

我知道如何处理router.query，但是我不想显示该查询的状态。

Answer 1

您可以尝试

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

稍后，您将可以在location对象中访问该状态。

请参阅：

https://reacttraining.com/react-router/web/api/location

https://reacttraining.com/react-router/web/api/Link

---

编辑：使用Next JS的Link组件，它的功能会有所限制。您可以使用as道具。

<Link href="/dashboard?from=loginPage" as="/dashboard" />

URL中仅显示/dashboard，您仍然可以在查询中访问from=loginPage。您必须将状态序列化为查询字符串（然后值将变为字符串。

这是一个简单的示例：

在导航中：

<Link href='/?from=navClick' as="/">
  <a>Home</a>
</Link>

在home组件中（在'/'上呈现）

import { useRouter } from 'next/router';

const Home = () => {
  const { query } = useRouter();

  return (
    <>
      {query.from ? `You are from: ${query.from}` : 'Well met.'}
    </>
  );
};

如果用户通过单击该链接进入主页，则将在query对象中获得from值，但是不会在浏览器的地址栏中显示它。