当我单击 Link 时，Nextjs 导致硬刷新

Question

我有一个应用程序使用 CRA 做出反应，我正尝试使用 next 将它变成一个 SSR 应用程序。所以，因为几乎没有，我唯一改变的是：

getInitialProps 而不是 useEffect 和 useState
Link 来自 "next / link" 而不是使用反应路由器 dom

但是当我点击 link 时，我得到了硬刷新。这是生成 link:

的原因

<Link href={post.meta.slug}>
    <a>{post.title}</a>
</Link>;

我也试过 href={post.meta.slug} as={post.meta.slug}。

在我的页面目录中有：

index.jsx
[鼻涕虫].jsx

这就是我在 [slug].jsx 中获得 post 的方式：

const PostPage = ({ post }) => {
    return <Base>{post ? <Post post={post} /> : null}</Base>;
};

PostPage.propTypes = {
    post: PropTypes.object,
};

PostPage.getInitialProps = async ({ query }) => {
    const post = await getPostBySlug(query.slug);
    return { post };
};

到目前为止，我无法识别错误。

完整代码如下：https://gitlab.com/flakesrc/blog-webstation-next

如果你想克隆：

git clone https://gitlab.com/flakesrc/blog-webstation-next.git
cd blog-webstation-next
npm install
npm run dev

Answer 1

您是否为您的 Link 尝试过这种格式？

<Link href='/[slug]' as={`/${post.meta.slug}`}>
  <a>{post.title}</a>
</Link>

Here is a good example of this type of routing for dynamic pages as well as the section in the docs 这也说明了一点。

当我单击 Link 时，Nextjs 导致硬刷新

Nextjs causing hard refresh when i click in the Link

reactjs

next.js