单击链接

我有一个使用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
lilipppp 回答:单击链接

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

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

Here is a good example这种用于动态页面的路由,以及in the docs部分也对此有所说明。

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

大家都在问