需要有关子路线渲染的帮助.父路由运行良好，但子路由降至404

Question

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

问题：当我在另一个JSON中添加带有一堆消息的另一个路由/news时，父路由/news工作正常，但子路由(如/news/1/或/news/2/(都会转到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/contences中有一个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>
))

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

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