У меня следующая структура:
- 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 }
}
, когда я щелкаю внутри компонента карты на go на динамически генерируемой странице, она работает правильно. Однако при переходе с url/blog на url/blog/my-slug я вижу сообщение об ошибке, которое быстро появляется и исчезает в консоли. Похоже, что он не может найти страницу, которая генерируется динамически, выдающую, как мне кажется, 500 error.
Я не могу понять, почему она появляется и исчезает так быстро.
ОШИБКА НИЖЕ I ЗАПИСАЛИ ВИДЕО НА ЭКРАНЕ
