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

Question

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

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

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

例如：

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

有人能帮我找出解决此问题的最佳方法吗？谢谢

[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

我找到了一个可行的解决方案，但不确定它是否是“最佳实践”。

我所要做的就是更改链接组件

<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。

链接：发现未知道具：到

Uncaught TypeError: Parameter 'url' must be a string, not undefined