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

Question

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

典型情况完全没问题

Index -> [slug] -> go back (Index)

但是问题出在这种情况下

[slug] -> go back(Index)

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

我检查了我的 Link 组件是否正确编写，它们是。

这是索引页面上的一个组件，其中包含 link 重定向

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

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

Why go back button doesn't trigger client side navigation in Next.js app?

javascript

reactjs

server-side-rendering

next.js