title: Need Help for Child Routes rendering. Parent route works fine, but child routes fall to 404
body: <p>I am developing a static site using JSON data. I replaced the post data in the react-static default sample, and it works fine.  </p>
  
  <p><strong>Problem</strong>: When I add another route <code>/news</code> with a bunch of messages in another JSON, the parent route <code>/news</code> works fine, but the child routes, such as <code>/news/1/</code> or <code>/news/2/</code> all go to 404 pages.  </p>
  
  <p>In the browser console, I got the error
  <code>GET http://localhost:3000/__react-static__/routeInfo/news/1 404 (Not Found)</code></p>
  
  <p>I do not think these are dynamic routes, as I can get the data before the react app mounted. <strong>What should I do to fix that</strong>?</p>
  
  <p>In my static.config.js</p>
  
  <pre class="lang-js prettyprint-override"><code>{
    path: '/news',
    getData: async () =&gt;  ({
      messages,
    }),
    children: messages.map(message =&gt; ({
      path: `/news/${message.ID}`,
      template: 'src/containers/Message',
      getData: () =&gt; ({
        message,
      }),
    })),
  }
  </code></pre>
  
  <p>and I have a Message.js in /src/containers as</p>
  
  <pre><code>import React from "react";
  import { useRouteData } from "react-static";
  
  export default () =&gt; {
    const { message } = useRouteData()
  
    return (
         &lt;div&gt;
            This is a {message.Title} page!
          &lt;/div&gt;
      )
  };
  </code></pre>
  
  <p>The worked <code>news.js</code> is as</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { useRouteData } from 'react-static'
  import { Link } from 'components/Router'
  
  export default function Blog() {
    const { messages } = useRouteData()
    return (
      &lt;div&gt;
        &lt;h1&gt;It's news.&lt;/h1&gt;
        &lt;div&gt;
          &lt;a href="#bottom" id="top"&gt;
            Scroll to bottom!
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;br /&gt;
        All Posts:
        &lt;ul&gt;
          {messages.map(message =&gt; (
            &lt;li key={message.ID}&gt;
              &lt;Link to={`/news/{message.ID}/`}&gt;{message.Title}&lt;/Link&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
        &lt;a href="#top" id="bottom"&gt;
          Scroll to top!
        &lt;/a&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>