单击链接

Question

我有一个使用CRA进行响应的应用程序，我正在尝试使用next将其转换为SSR应用程序。因此，由于几乎没有，所以我唯一更改的是：

• getInitialProps而不是useEffect和useState
• 从“下一个/链接”链接而不是使用反应路由器dom

但是，当我单击链接时，就会得到刷新。 这是生成链接的原因：

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

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

在我的页面目录中，我有：

• index.jsx
• [slug] .jsx

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

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这种用于动态页面的路由，以及in the docs部分也对此有所说明。