动态页面不会更改呈现的组件，但 URL 使用 Link 单击后退按钮时会更改

Question

我在使用 Next.js 创建博客时遇到了问题，希望有人能为我指明正确的方向，因为我对 Next.js 比较陌生。

我正在尝试从 Google Firestore 上的数据库中提取文档，每个文档都是不同的博客 post。我试图避免为每个博客 post 创建单独的页面，并创建了一个动态页面 [url].js，每个 post 都使用它来呈现。

无论如何，当我访问博客 post、刷新该博客 post，然后尝试点击后退按钮时，我的问题就出现了。 URL 会改变，但屏幕上呈现的组件不会。因此，它不会返回包含所有博客列表的页面，而是保留在当前博客 post 但 url 更改为所有博客列表。

例如：

如果我在 localhost:3000/blog/test-page 然后刷新页面并返回，url 更改为 localhost： 3000/blog 但测试页面仍在显示其内容。

谁能帮我找出解决这个问题的最佳方法？谢谢

[url].js

const Post = props => (
  <Layout
          template={"blog"}
  >
      <div className="container">
        <div className="default-content page-styles">   
            <h2 className="title title-small"><span>{props.blogPost.title}</span></h2>             
              {props.blogPost.body.map(block => Components(block))}
        </div>
      </div>
  </Layout>
);

Blog.js

const Blog = (props) => (

<Layout>
   <HeroBanner 
      title={title}
      desktopImage={desktopImage}
      mobileImage={mobileImage}
      mobileImageSmall={mobileImageSmall}
      padding="120px 0px 150px 0px"/>

<section className="default spaced-page">
         <div className="container">
            <div className="default-content" >
               <div className="the-post-section">
               {props.blogPost.map(post => (
                    <div key = {post.id} className="the-post page-styles">
                      <img src={post.image} style={{ height: 180 + "px", width: 310 + "px"}}/>
                      <Link href="/blog/[url]" as={`/blog/${post.url}`}>
                        <h4><a>{post.title}</a></h4>
                      </Link>
                      <div className="clear"></div>
                    </div>
                  ))}
               </div>
            </div>
         </div>
      </section>
</Layout>
);

Answer 1

我找到了一个可行的解决方案，但不确定它是否是 "best practice"。

我所要做的就是将 Link 组件从

<Link href="/blog/[url]" as={`/blog/${post.url}`}>
    <h4><a>{post.title}</a></h4>
</Link>

去掉h4标签，把href=改成to=

<Link to="/blog/[url]" as={`/blog/${post.url}`}>
    <a>{post.title}</a>
</Link>

编辑：事实证明这实际上会在控制台中引发错误，因此我可能必须找到其他方法。

这是错误。

警告：道具类型失败：道具 href 在 Link 中被标记为必需，但其值为 undefined.

Link：找到未知道具：to

未捕获类型错误：参数'url'必须是字符串，而不是未定义的

动态页面不会更改呈现的组件，但 URL 使用 Link 单击后退按钮时会更改

Dynamic Pages Don't Change Rendered Components But URL Changes When Clicking Back Button, Using Link

javascript

reactjs

react-router

next.js