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

Question

我有一个简单的 Next.js 应用程序，它使用 GraphQL 从服务器加载文章。除非您在阅读某篇文章并想返回时重新加载页面，否则动态路由可以正常工作。

典型情况完全没问题

索引 -> [slug] -> 返回（索引）

但问题在于这种情况

[slug] -> 返回（索引）

页面不会触发重新渲染，当 url 指向索引时，页面上的内容保持不变。

我检查了我的链接组件是否正确编写。

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

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 中的一个错误。已经修好了。