Question

我具有以下结构：

- blog (directory)
-- index.js (list of all blog articles)
-- [slug].js (single article)

当我进入index.js时，我有：

const Blog = props => {
  const { pageProps: { articles } } = props
  const blogArticles = objectToArray(articles)

  return (
    <Layout bio={props.bio}>
      <Title>
        I am excited by the idea of sharing my knowledge and perhaps inspiring others.
      </Title>
      {blogArticles.map(
        (article, i) => <Card key={`id-${i}`} data={article} />
      )}
    </Layout>
  )
}

Blog.getInitialProps = async () => {
  const articles = await getBlogArticles()
  return { articles }
}

并且卡片组件具有链接：

...
    <Link href={`/blog/${slug}`}>
      <Wrapper>
        <ImgWrapper>
          <Img src={BASE_URL + url} />
        </ImgWrapper>
        <TextWrapper>
          <Title>{title}</Title>
          <ArtcilePreview>{intro}</ArtcilePreview>
        </TextWrapper>
      </Wrapper>
    </Link>
...

在[slug].js里面，我有

const BlogArticle = (props) => {
  return (
    <Layout bio={props.bio}>
      <Article title={props.pageProps.article[0].title} content={props.pageProps.article[0].content} />
      <ArticleShare url={'process.env.API_URL + asPath'} />
    </Layout>
  )
}

BlogArticle.getInitialProps = async ({ query }) => {
  const article = await getArticleBySlug(query.slug)
  return { article }
}

当我在卡组件内单击以转到动态生成的页面时，它可以正常工作。但是，在从url/blog到url/blog/my-slug的过渡过程中，我可以看到错误消息在控制台中迅速出现和消失。好像找不到动态生成的页面并抛出了我认为是500 error的页面。

我不知道为什么它会这么快地消失。

我在录制视频后出现以下错误

Answer 1

根据nextjs documentation，您不应在handleAddPicture中添加实际的子弹如果您检查链接我上面链接的文档，正确的用法是

href

链接到动态页面时出现下一个js错误

1 个答案: