JSON データを使用して静的サイトを開発しています。react-static デフォルト サンプルの投稿データを置き換えたところ、正常に動作しました。
問題/news
:別の JSON に多数のメッセージを含む別のルートを追加すると、親ルートは正常に機能しますが、またはすべて/news
の子ルートは404 ページに移動します。 /news/1/
/news/2/
ブラウザのコンソールで、エラーが発生しました
GET http://localhost:3000/__react-static__/routeInfo/news/1 404 (Not Found)
反応アプリがマウントされる前にデータを取得できるため、これらは動的ルートではないと思います。それを修正するにはどうすればよいですか?
私の static.config.js で
{
path: '/news',
getData: async () => ({
messages,
}),
children: messages.map(message => ({
path: `/news/${message.ID}`,
template: 'src/containers/Message',
getData: () => ({
message,
}),
})),
}
/src/containers に Message.js があります
import React from "react";
import { useRouteData } from "react-static";
export default () => {
const { message } = useRouteData()
return (
<div>
This is a {message.Title} page!
</div>
)
};
作業news.js
は次のとおりです
import React from 'react'
import { useRouteData } from 'react-static'
import { Link } from 'components/Router'
export default function Blog() {
const { messages } = useRouteData()
return (
<div>
<h1>It's news.</h1>
<div>
<a href="#bottom" id="top">
Scroll to bottom!
</a>
</div>
<br />
All Posts:
<ul>
{messages.map(message => (
<li key={message.ID}>
<Link to={`/news/{message.ID}/`}>{message.Title}</Link>
</li>
))}
</ul>
<a href="#top" id="bottom">
Scroll to top!
</a>
</div>
)
}