javascript - 动态页面不会更改呈现的组件，但在单击后退按钮、使用链接时 URL 会发生变化

Question

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

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

无论如何，当我转到一篇博客文章，刷新该博客文章，然后尝试点击后退按钮时，我的问题就出现了。 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>

编辑:事实证明这实际上会在控制台中引发错误，所以我可能必须找到不同的方法。

以下是错误。

警告:失败的 prop 类型:prop href 在 Link 中被标记为必需，但其值为 undefined。

链接:发现未知 Prop :至

未捕获类型错误:参数“url”必须是字符串，而不是未定义