需要儿童路线渲染的帮助。父路由工作正常，但子路由下降到 404

Question

我正在使用 JSON 数据开发一个静态网站。我替换了 react-static 默认示例中的帖子数据，它工作正常。

问题：当我在另一个 JSON 中添加带有一堆消息的另一个路由 /news 时，父路由 /news 工作正常，但子路由，例如 /news/1/ 或 @ 987654324@ 全部进入 404 页。

在浏览器控制台中，我得到了错误 GET http://localhost:3000/__react-static__/routeInfo/news/1 404 (Not Found)

我不认为这些是动态路由，因为我可以在安装 react 应用程序之前获取数据。 我应该怎么做才能解决这个问题？

在我的 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>
  )
}

Answer 1

请试试这个：

const works = filterLanguage(JSON.parse(JSON.stringify(works)), lang)
...
{
   path: `/${lang}/works`,
   getProps: () => ({
      works,
   }),
   children: works.works.map(work => ({
       path: `/${work.slug}`,
       getProps: () => ({
           works,
           work: filterLanguage(Object.assign({}, {labels: works.labels}, work), lang),
       }),
   }))
},


const Work = getRouteProps(({ work }) => (
  <div>This is a work! {work}</div>
))

const Works = getRouteProps(({ works }) => (
  <div>
    <div>My works! {works}</div>
    <Route path="/works/:workID" component={Work} />
  </div>
))

如果您需要消息页面中的 message.ID 值。消息对象包含 ID 字段。

我认为路径：/news/${message.ID} 是动态路由。 也许您需要 url 包含新闻 ID。 你可以在你的链接标签中使用/news/show?id=${message.ID}。