Javascript 需要有关子路由渲染的帮助。父路由工作正常，但子路由降至404

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

问题：当我在另一个JSON中添加另一个路由

/news

时，父路由

/news

工作正常，但子路由，如

/news/1/

或

/news/2/

都会进入404页

在浏览器控制台中，我得到了错误

GEThttp://localhost:3000/__react-静态\路由信息/新闻/1 404（未找到）

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

在我的static.config.js中

{
路径：'/news'，
getData:async（）=>({
信息，
}),
子项：messages.map（message=>({
路径：`/news/${message.ID}`，
模板：“src/containers/Message”，
getData:（）=>({
消息
}),
})),
}

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

请试试这个：

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

constworks=filterLanguage（JSON.parse（JSON.stringify（works）），lang）
...
{
路径：`/${lang}/works`，
getProps:（）=>({
作品
}),
孩子：works.works.map（work=>({
路径：`/${work.slug}`，
getProps:（）=>({
作品
work:filterLanguage（Object.assign（{}，{labels:works.labels}，work），lang），
}),
}))
},
const Work=getRouteProps（（{Work}）=>(
这是一部作品！{work}
))
const Works=getRouteProps（（{Works}）=>(
我的作品！{works}
))

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

我认为路径：

/news/${message.ID}

是动态路径。 也许你需要包含新闻ID的url。 您可以在链接标记中使用该

/news/show？id=${message.id}

。

请尝试以下操作：

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

constworks=filterLanguage（JSON.parse（JSON.stringify（works）），lang）
...
{
路径：`/${lang}/works`，
getProps:（）=>({
作品
}),
孩子：works.works.map（work=>({
路径：`/${work.slug}`，
getProps:（）=>({
作品
work:filterLanguage（Object.assign（{}，{labels:works.labels}，work），lang），
}),
}))
},
const Work=getRouteProps（（{Work}）=>(
这是一部作品！{work}
))
const Works=getRouteProps（（{Works}）=>(
我的作品！{works}
))

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

我认为路径：

/news/${message.ID}

是动态路径。 也许你需要包含新闻ID的url。

---

---

您可以在链接标记中使用

/news/show？id=${message.id}

。

是否需要像函数一样调用

useRouteData

useRouteData（）

。这只是一个复制/粘贴错误吗？对不起，这是一个错误。它应该是useRouteData（）。我确认js文件中没有这个输入错误。我不是在计算机上，但是如果它是

'/news'

的子对象，那么子对象的路径可能只是

/${message.ID}

？不太可能，消息是

新闻的子路径。作为示例，此处列出了父管线。我在浏览器控制台中看到的路由层次结构是正确的。因此，如果您将链接更改为
{message.Title}
，您仍然会得到404？是否需要像函数一样调用
useRouteData
useRouteData（）
。这只是一个复制/粘贴错误吗？对不起，这是一个错误。它应该是useRouteData（）。我确认js文件中没有这个输入错误。我不是在计算机上，但是如果它是
'/news'
的子对象，那么子对象的路径可能只是
/${message.ID}
？不太可能，消息是
新闻的子路径。作为示例，此处列出了父管线。我在浏览器控制台中看到的路由层次结构是正确的。因此，如果您将链接更改为
{message.Title}
，您仍然会得到404？我试过了。但是，它仍然无法使用
/news
下的静态子路由
/show
。我更新了
news.js
文件以供进一步参考。我看到了一些文章。你需要阅读以下内容：我认为这个问题与你的问题相同谢谢Khayankhyarvaa！我检查了这个问题并尝试了解决方案，但它不起作用。我的情况似乎和那个问题不一样。我的父路径
/news
始终运行良好，这意味着我获得了正确的数据
消息
。但是，使用模板
Message.js
的子路由无法加载，并下降到404页，即使我将全部静态内容放入其中。我尝试了。但是，它仍然无法使用
/news
下的静态子路由
/show
。我更新了
news.js
文件以供进一步参考。我看到了一些文章。你需要阅读以下内容：我认为这个问题与你的问题相同谢谢Khayankhyarvaa！我检查了这个问题并尝试了解决方案，但它不起作用。我的情况似乎和那个问题不一样。我的父路径
/news
始终运行良好，这意味着我获得了正确的数据
消息
。但是，使用模板
Message.js
的子路由无法加载，并且会下降到404页，即使我将全部静态内容放入其中。