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

【问题标题】：Can I add a property or state into Next JS Router like React-Route?我可以像 React-Route 一样向 Next JS Router 添加属性或状态吗？
【发布时间】：2019-09-17 16:54:44
【问题描述】：

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

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

【问题讨论】：

标签： reactjs react-router next.js

【解决方案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" />

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

这是一个简单的例子：

在导航中：

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

在主组件中（在“/”上呈现）

import { useRouter } from 'next/router';

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

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

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

【讨论】：

感谢您的回答。实际上它有点深，我没有使用链接，也没有使用 react-router。我正在使用下一个 js 路由器。
嗨@hiad - 对不起，我在答案中添加了一个例子。基本上，您可以使用 as 道具向用户“隐藏”查询参数。