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

我有一个简单的Next.js应用程序,该应用程序使用GraphQL从服务器加载文章。除非您在阅读某些文章并想返回时重新加载页面,否则动态路由会完美地工作。

典型情况是完全可以的

  

索引-> [子弹]->返回(索引)

但是问题出在这种情况下

  

[子弹]->返回(索引)

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

我已经检查了我的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>
        </>
    )
}
ppliang69 回答:为什么“返回”按钮不触发Next.js应用程序中的客户端导航?

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

本文链接:https://www.f2er.com/3080643.html

大家都在问