Question

我有一个简单的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>
        </>
    )
}

Answer 1

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

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

1 个答案: