Next.js: 可以将状态传递给下一个/路由器吗？

目前这是不可能的，我认为我们不会在不久的将来支持它。

但是让我们打开它，看看我们是否真的需要它。

我认为你应该通过传递查询参数来做到这一点。

我的意思是你可以通过像 nkzawa 所说的那样传入查询参数来实现类似的事情，但我宁愿不要用http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed污染我的 url，而是宁愿像 react-router 那样进行状态转移。

您可以使用as来伪装 URL

好吧，我想是这样，但是如果我要使用as ，则路径名不会保留 props.url.pathname 中的实际路径名，这意味着要传递给查询的内容更多。 让它通过状态只是_cleaner_。

我正在将一个项目移植到 next.js 并且没有遇到任何重大的兼容性问题，因为我找到了重构代码以使其工作的方法，此时可以改进的只是不便和冗长，所有这些问题都是.

感谢大家的意见。

关闭这个不活动的原因👍

我提出这个问题已经一年多了，但这仍然无法支持吗？

您可以在 localStorage、sessionStorage、变量、Redux 存储等中保存任何所需的状态，然后在 getInitialProps 中使用它（检查您是否正在运行客户端）。

我认为 nextjs 应该开始支持 react-router

我想要相同的功能。

早些时候我使用 CRA，我曾经在那里将状态发送到路由组件。 我想要与 nextjs 相同的功能。

@sergiodxa在解决方法中建议的内容，但库支持会很好。

同样在这里，如果可以使用Router.push()传递数据并稍后使用withRouter检索它，那就太好了

我想要相同的功能。 这事有进一步更新吗 ？

我想要相同的功能。 这事有进一步更新吗 ？

我也是

与此问题相关的另一个问题是：

• 当我调用 Router.push() 并且我想将状态传递给下一个组件时，我不想污染我的 URL。 有什么办法吗？ 使用 localStorage 或 cookie 是一种不好的做法，因为它们不受 React 钩子或旧的 React 生命周期的直接控制

我有一个场景，我有一个可点击的组件。 单击它将打开其详细信息页面。 使用当前的 next.js，我可以传递项目 ID，然后使用 useEffect 和 axios 调用获取详细信息，但由于我已经有了数据，我真的希望我可以将状态发送到该页面。

有这个就好了。

@sergiodxa是的，有很多方法可以传递临时消息，但是将其绑定到路由器的好处是我们不必编写额外的代码来管理我们传递的值的生命周期。 它们将与路由器导航事件相关联，在其他上下文中不可用。

例如，如果我将它推送到我的 redux 存储，那么我必须将其排除在持久存储到本地存储之外，并且还要在接收端发送一个明确的消息操作。

如果我将它添加为查询字符串，它将成为一个永久链接，可以使用书签并稍后返回。

但是我可以通过router.push将它推送到下一页，并且只推送到下一页我不必做任何补偿； 该值仅在该上下文中可用。

非常类似于connect-flash

自 2017 年 1 月 15 日以来没有解决方案？
我们需要这个功能：

同样在这里，如果可以使用Router.push()传递数据并稍后使用withRouter检索它，那就太好了

在 nextjs 中有这个会很高兴

如果要隐藏查询参数，只需像这样使用

Router.push(`/main?userName=${userName}`, 'main')

与主页相比，您只能在 url 上看到/main和
console.log(Router.route)显示查询

pathname: "/main"
query: {userName: "fadsfasd"}
asPath: "main"

哦，是的，这是真的。 顺便说一句，我发现路由器需要两个字符串真的很尴尬。 没有react-router可以很好地工作，为什么会这样？

对于那些想要制作它的人，您可以使用Context Api 。

Next.js 提供了router.push()传递shallow: true作为道具。
这是最简单的状态管理。
https://nextjs.org/docs/api-reference/next/router#routerpush

愿意重新考虑这一点，但是它需要一个关于如何防止用户使用历史状态在脚上射击自己的好建议，例如，鉴于您无法访问历史状态服务器端，这将很容易导致水合问题。

请注意，重新打开它并不意味着我不会为此功能编写 RFC，这将取决于想要拥有此功能的人。

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

超过 2 年，仍在等待状态功能

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

这仍然不是内部状态，它是一个带有掩码功能的查询字符串，在我看来这是一件很奇怪的事情。

我对 React 生态系统不是很熟悉。 但看起来你可以做

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

当您在 PopState 之前返回并检查时，选项道具将包含{ step: 2 } 。

我们只需要在router对象中使用它。

我对 React 生态系统不是很熟悉。 但看起来你可以做

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

当您在 PopState 之前返回并检查时，选项道具将包含{ step: 2 } 。

我们只需要在router对象中使用它。

它看起来像另一个临时黑客，而不是故意行为。 文档中列出了预期的选项。 但是与此类似的事情会很好地具有预期的行为

@likerRr显然所有选项参数都被传递给window.history.state 。 所以用我的例子：
window.history.state == { step: 2 }

@likerRr显然所有选项参数都被传递给window.history.state 。 所以用我的例子：
window.history.state == { step: 2 }

好像是这样。 无论如何，在它被记录之前，它不能在产品中使用，因为传递选项的实现可以随时更改：失望：历史状态的另一个问题（？），它是持久的。 而且，如果您使用“后退”/“前进”按钮，您通常会得到意想不到的行为。

据我了解，社区想要的用例是传递数据，这些数据只会在从一页到另一页的转换过程中离开，我们不必费心清除它。 当用户在浏览器中单击“后退”时，此数据不应再次出现。 否则这是最好的提议（imo）。

如果下一个js考虑这个会很好

这对我有用，你可以使用
https://github.com/vercel/next.js/issues/771#issuecomment -612018764

1：在订阅页面：
const handleClick = useCallback((mount) => {
Router.push( /payment?mount=${mount} , '/payment');
}, []);
2：在支付页面
使用效果（（）=> {
常量 {
查询：{安装}，
} = 路由器；
!mount && Router.push('/campaign-overview/subscription');
console.log('PaymentVM:React.FC -> mount', mount);
}, []);

您可以在控制台浏览器中看到mount的值。

我了解能够在 router.push 中传递状态的问题和便利性。

以下是临时解决方案吗？

使用浏览器的 history.pushState，以及位置字符串的本地 useState，当我们想要重定向时，我们使用 history.pushState 以及为本地位置状态设置一个新值。 对 location-string-state 的更新应触发 useEffect 运行。 然后有一个 JS swich 语句来评估位置并根据位置返回组件。 如果我们想在没有 history.pushState 的情况下访问相同的组件（例如，如果用户刷新页面），我们可以将位置设置为动态的下一个查询参数。 ——没试过，只是想办法解决。

对于那些想要制作它的人，您可以使用Context Api 。

Next.js 提供了router.push()传递shallow: true作为道具。
这是最简单的状态管理。
https://nextjs.org/docs/api-reference/next/router#routerpush

如果在我的getServerSideProps中，我做了两个调用，其中一个应该为每次加载重做，一个应该只加载一个条件。 为此， Shallow: true不会有太大帮助，因为它不是状态管理器，它要么重做getServerSideProps ，要么根本不做。
这种情况的一个例子是，如果我在getServerSideProps中进行两次单独的调用。 一个用于页面的主要内容，然后另一个用于获取导航链接。 在初始渲染中，我希望两个调用都在服务器上，但是，我已经在内存中有导航链接，所以我不需要重新获取它们。 这就是为什么我们需要状态。

唯一的解决方案是发送一个带有隐藏查询参数的as选项，但是我们的代码对于我们传入的包含当前状态的一组查询参数的每一个<Link/>都会很糟糕。 （实际上，正如我写的那样，我正在考虑制作一个 HOC 链接，它应该去指定的 href 并发送一个带有当前状态的查询对象，所以我不需要在每个<Linke/>中编写状态对象，我'只会在 HOC 中处理这个）