问题标签 [next-router]

我有一个页面我正在尝试修复，以便在用户按下后退按钮（浏览器）时保持滚动位置。假设我有一个名为 list 的组件，我在其中向用户展示了一些产品。要查看所有产品，用户可以向下滚动列表组件。当用户单击某个产品时，应用程序会将用户重定向到详细信息组件。然后，当用户尝试返回列表，点击浏览器的后退按钮时，列表组件被渲染，并且似乎自动滚动到顶部。

据我所知，按下浏览器的后退按钮会触发一个window.history.back()动作，没有其他反应。

对于一个解决方案，我在我的应用程序的上下文中实现了一个变量，它保存了 scrollY 值，然后，在我试图呈现的组件（列表组件）的componentWillMount（或）中，我将滚动位置设置为值集useEffect在上下文中。

我的解决方案的详细信息在这里，因为我的整个代码都基于这个堆栈溢出的帖子： 如何在返回下一个 js 时更改滚动行为？

我已经使用一些日志检查了该值，并且滚动位置已正确保存在上下文中，但是，由于我使用的是窗口事件侦听器，它会在呈现列表组件后将值设置为零。

在我的代码中，我没有使用任何类型的滚动配置，所以我想知道这种行为是否是 Next.js 或 react 的某种默认行为。当用户点击浏览器的后退按钮时会发生这种情况，但我是 next 的新手，我不知道我是否遗漏了什么或什么，我什至不知道这个问题是否与 React 或Next.js 本身。

我正在尝试用 Jest 模拟 NextJS 路由器事件。在NextJS router & Jest找到相关资源。那里的实现与我的非常相似。

但是，那里提到的解决方案对我不起作用。

我的测试如下：

在内部，我的组件就像引用的示例一样具有以下内容：

与引用的示例不同，当我运行我的代码时，我仍然收到以下错误：

我错过了什么？

我正在使用 Nextjs 作为我的电子商务网站的反应框架。我的产品详细信息页面有一个自定义后退按钮，它具有Router.back()功能。这在网站中来回浏览时正常工作。但是，每当我复制产品详细信息链接并直接以隐身模式打开时，自定义后退按钮将不起作用......！！

有人对此有解决方案吗？

我感谢您的所有帮助。我喜欢 create-react-app 如何让您运行 NPM RUN BUILD，然后将“Build”文件夹上传到您的 FTP 目录。

NextJS 怎么可能呢？我构建了我的应用程序并运行了 NPM RUN BUILD，但没有看到 Build 文件夹。我正在使用带有 getServerSideProps 的服务器端渲染，那么是否有一个网页可以解释这一点？我在 NextJS.org 上阅读了 Deployment 网页，但我不想使用他们的服务器。

再次感谢你的帮助。

布鲁斯

I have a next.js multistep form with a Stepper. Stepper has following state on the initial load:

This state is handeled in context, where I also useRouter to set my URL depending on form step. Every time user clicks next button the following functions is called:

So far so good. Now in my context I wish to check if router.asPath === '/?step=1' then it should do smth like this:

So, if I just leave it like that I get an error: Too many re-renders. React limits the number of renders to prevent an infinite loop. I figured, I might need to useEffect like this:

With that approach state changes only after I hit the reload button in the browser, not on changing to the next form step. How do I reach following behavior: I hit the button next step - the url path changes, state changes, I hit back button, again, the url changes and so does the steps state?

我使用 nextjs 和 framer动作做了以下

我有一个我正在映射的图像列表，并为它们分配了一个 layoutid 和一个可选的动画变体。layoutid 对应于model1、model2、model3 页面上的layoutid。

当前行为

当第一次进入主页并单击图像时，我更新了一些状态并将变体动画设置为 false，然后告诉该图像使用 layoutid，然后淡出其他图像并将单击的图像动画到适当的位置已加载的组件（模型 1、模型 2、模型 3）...太好了！

如果您然后单击导航中的主页并尝试再次单击某个项目，则它不起作用，所有图像都会淡出并且单击的图像不会动画。

单击主页上的刷新，它可以按要求工作！

这是页面的代码，我怀疑它可能与 _app.js 中的路由或设置有关

导出默认 MyApp；

我正在尝试遵循 Ben Awad 的 lireddit 教程。

他展示了如何制作实用程序文件来显示应用程序中的任何身份验证错误。

我认为自从他制作视频以来，下一个/路由器的情况可能已经改变。我正在努力找出一种方法来使用路由器以这种方式在组件内部的钩子内部重定向。

我无法将 useRouter 钩子放在 exchangeError 中 - 我认为原因是当我想在其他组件中使用 exchangeError 时，该钩子不再位于顶层，但是我不知道如何让exchangeError在没有它的情况下工作，或者适应next/router的更新版本。

我最好的尝试（我知道我不能这样使用它）如下：

Ben 在 lireddit 上发布的版本是：

整个实用程序文件如下：

然后，在创建帖子表单中，此实用程序的使用如下：

我有一个 Next.js 应用程序，索引页面仅包含验证码，并且在成功输入后重定向到 mydomain.com/form 上的表单，并且效果很好。但我也可以在浏览器中输入

mydomain.com/form

并在没有验证码的情况下使用它，这显然是我不想要的。

除了从验证码页面重定向之外，有没有办法限制所有条目？只找到了我不需要的登录等解决方案。

我正在使用 react-google-recaptcha 包

这是我的索引页

我只想通过单击其他页面的按钮而不是通过在 Next JS 的浏览器中键入直接 url 路由来导航到页面。页面是静态的且未经身份验证。

我们有一个场景，我们需要从浏览器历史记录中隐藏 NextJS 路由。

目前，这是在 .NET 应用程序中实现的，如下所示：

• 用户使用参数点击路由：download?¶m1=sdgsdgsd¶m2=lsmgslsdmg
• 这些参数有些私有，因此 .NET 控制器将值存储在会话中并返回带有令牌的 302 重定向 -> download&token=lsdgsdkngdnsg
• 然后，此信息将在将来用于访问服务器上的会话。

完成上述操作，意味着由于重定向，原始请求不会显示在浏览器历史记录中。这意味着如果从公共计算机访问它不会显示。当然还有其他方法，这只是预防。

我们试图在 NextJS 应用程序中复制相同的行为。NextJS 背后有 serverless 的概念，所以我们需要一种方式，将访问的页面重定向并从不同庄园的服务器访问。