1

I am developing a static site using JSON data. I replaced the post data in the react-static default sample, and it works fine.

Problem: When I add another route /news with a bunch of messages in another JSON, the parent route /news works fine, but the child routes, such as /news/1/ or /news/2/ all go to 404 pages.

In the browser console, I got the error GET http://localhost:3000/__react-static__/routeInfo/news/1 404 (Not Found)

I do not think these are dynamic routes, as I can get the data before the react app mounted. What should I do to fix that?

In my static.config.js

{
  path: '/news',
  getData: async () =>  ({
    messages,
  }),
  children: messages.map(message => ({
    path: `/news/${message.ID}`,
    template: 'src/containers/Message',
    getData: () => ({
      message,
    }),
  })),
}

and I have a Message.js in /src/containers as

import React from "react";
import { useRouteData } from "react-static";

export default () => {
  const { message } = useRouteData()

  return (
       <div>
          This is a {message.Title} page!
        </div>
    )
};

The worked news.js is as

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>
  )
}
celest cui
  • 11
  • 2
  • Does `useRouteData` need to be called like a function? `useRouteData()`. Is this just a copy/paste typo? – Drew Reese Mar 15 '20 at 03:34
  • Sorry, it's a typo. It should be useRouteData(). I confirm that there is no this typo in the js file. – celest cui Mar 15 '20 at 23:58
  • I'm not at a computer, but if it's a child of `'/news'` would the path of the child potentially be just ``/${message.ID}``? – Sydney Y Mar 16 '20 at 04:37
  • Not really, the message is a child route of `news`. As the sample, the parent route is listed there. And the route hierarchy I could see in the browser console is right. – celest cui Mar 16 '20 at 04:48
  • So if you change the link to ` {message.Title} ` you still get a 404? – Sydney Y Mar 16 '20 at 04:55
  • Thank you Sydney. It works now. Seems I did not get right understanding about the relationship of the child route path. – celest cui Mar 18 '20 at 08:27

1 Answers1

0

Please try this:

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

If you need value of message.ID in Message page. message object contains ID field.

I think path: /news/${message.ID} is dynamic route. Maybe You need url contains news ID. You can use that /news/show?id=${message.ID} in your Link tag.

Khayankhyarvaa Turmandakh
  • 181
  • 1
  • 6
  • I tried. However, it's still not work with the static child route `/show` under the `/news`. I updated the `news.js` file here for further reference. – celest cui Mar 16 '20 at 04:29
  • I saw some article. You need to read this: https://github.com/react-static/react-static/issues/308 – Khayankhyarvaa Turmandakh Mar 16 '20 at 04:54
  • I think this problem same of your problem – Khayankhyarvaa Turmandakh Mar 16 '20 at 04:55
  • Thanks Khayankhyarvaa! I checked that issue and tried the solution, but it doesn't work. My situation seems not as same as that issue. I have the parent route `/news` worked fine always, that means I got the right data `messages`. However, the child route, with template `Message.js` can not be loaded and falls to 404 page, even I put full static content into it. – celest cui Mar 17 '20 at 00:44