1

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>
  )
}
4

1 に答える 1