为什么返回按钮不会在 Next.js 应用中触发客户端导航？

Question

我有一个简单的Next.js应用程序，它使用GraphQL从服务器加载文章。动态路由工作得很好，除非你在写某篇文章时重新加载页面并想回去。

典型的情况是完全好

索引->[slug]->返回(索引(

但问题是在这种情况下

[slug]->返回(索引(

页面不会触发重新发布，当url指向Index时，页面上的内容保持不变。

我已经检查了我的链接组件是否正确写入，并且它们是正确的。

这是索引页面上的一个组件，包含重定向的链接

const Index: FunctionComponent<IArticlePreviewProps> = (props) => {
const { article }: { article: IArticlePreviewData } = props;
return (
<Link href="/articles/[slug]" as={`/articles/${article.slug}`}>
<a>
<img src={article.thumbnail} alt=""/>
</a>
</Link>
)
}

这是一个动态的组件，显示文章内容

const Article: NextPage = (props) => {
const router = useRouter();
const { loading, data, error } = useQuery<IArticleQueryData>(ARTICLE_QUERY, {
variables: { id: router.query.slug }
});
if (loading) {
return null;
}
const article = data!.Article;
return (
<>
<div className="d-flex justify-content center">
<div className="container">
<div className="article">
<div className="article__header d-flex">
<div className="col-8 p-0 article__header-thumbnail">
<img src={article.thumbnail} alt=""/>
</div>
<div className="col-4 p-4 article__header-title d-flex flex-column justify-content-end">
<h1>{article.title}</h1>
<time className="article-date" dateTime={article.createdAt}>
{getArticlePreviewDate(article.createdAt)}
</time>
</div>
</div>
</div>
</div>
</div>
</>
)
}

Answer 1

这只是Next.js中的一个错误。它已经修复了。