需要帮助的儿童路线渲染。父路由运行良好，但子路由降至404。

Question

我正在使用JSON数据开发一个静态站点。我在react静态默认示例中替换了post数据，它运行得很好。

Problem：当我在另一个JSON中添加另一个带有大量消息的路由/news时，父路由/news可以正常工作，但是子路由(如/news/1/或/news/2/ )都会转到404页。

在浏览器控制台中，我得到了错误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/ 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值。message对象包含ID字段。

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