Routing from Page 1 to Page 2, then coming back to Page 1 using browser back, breaks Page 1 [NextJS 13]

huangapple go评论74阅读模式
英文:

Routing from Page 1 to Page 2, then coming back to Page 1 using browser back, breaks Page 1 [NextJS 13]

问题

我正在使用next 13.4.5和基于typescript的/app路由。

在我的第一页,我有<Link>(next/link),从中我导航到第二页。
如果我使用浏览器的返回按钮回到第一页,整个页面会出现问题。例如,顶部部分消失了,页面从中间开始。其他页面的CSS不起作用等。

我的第一页完全是SSR。但在第二页,我在page.tsx中使用了"use client"

分享上述网站的部署版本:

  1. 主页是第一页。
  2. 登录页面是第二页。

要重现问题,请转到https://buzzli.vercel.app并在右上角按下“开始使用”按钮。这是next/link标签。它会带你到登录页面。然后尝试使用返回按钮回到上一页。您将看到错误。

我不知道我在这里做错了什么,所以不分享任何代码。

英文:

I'm using next 13.4.5 and /app based routing with typescript.

In my page 1, I have &lt;Link&gt;(next/link), from which I navigate to Page 2.
If I use the browser back button to come back to page 1, the whole page breaks. For example, the top section vanishes, and page starts from middle. CSS for the rest of the pages don't work, etc.

My page 1 is fully SSR. But in page 2, I have used &quot;use client&quot;; in the page.tsx.

Sharing a deployed version of the above mentioned site:

  1. The home page is the page 1.
  2. The login page is the page 2.

For reproduction, please go to https://buzzli.vercel.app and at the top right corner, press the "Get Started" button. This is the next/link tag. It will take you to the login page. Then try to come back to the previous page using the back button. You'll see the error.

I don't know what I'm doing wrong here, so not sharing any code.

答案1

得分: 0

我找出了问题。

实际上问题出在嵌套的&lt;html&gt;标签中。

项目结构如下:

/
--&gt; 布局
--&gt; 页面
--&gt; /登录
    --&gt; 布局(问题出在这里)
    --&gt; 页面

我错误地在这个内部布局文件中放了另一个html标签。

英文:

I figured out the problem.

Actually the problem lied in nested &lt;html&gt; tags.

The project structure was something like this:

/
--&gt; layout
--&gt; page
--&gt; /login
    --&gt; layout (the problem lied here)
    --&gt; page

By mistake, I had put another html tag in this inner layout file.

huangapple
  • 本文由 发表于 2023年6月19日 19:57:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/76506393.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定