1

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

问题：当我/news在另一个 JSON 中添加带有一堆消息的另一个路由时，父路由/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/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

0

请试试这个：

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 字段。

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

于 2020-03-16T03:28:19.770 回答