title: Cannot use gatsby-plugin-intl for single page site
body: <p>I'm using <code>Gatsby</code> and I want build a single page site, so without create pages. For achieve this I edited <code>gatsby-node.js</code> with the following code:</p>
  <pre><code>exports.onCreatePage = async ({ page, actions }) =&gt; {
    const { createPage } = actions
  
    if (page.path === &quot;/&quot;) {
      page.matchPath = &quot;/*&quot;
      createPage(page)
    }
  }
  </code></pre>
  <p>in that case, each request is re-routed to the <code>index.js</code> page, which is the only one.
  Then, in the <code>index.js</code> page I have:</p>
  <pre><code>const IndexPage = () =&gt; {
    const intl = useIntl()
    const locale = intl.locale
  
    return (
      &lt;BGTState&gt;
        &lt;BlogState&gt;
          &lt;Layout&gt;
            &lt;Router&gt;
              &lt;Home path={`${locale}/`} /&gt;
              &lt;Section path={`${locale}/:sectionSlug`} /&gt;
              &lt;Collection path={`${locale}/:sectionSlug/:collectionSlug`} /&gt;
              &lt;Season
                path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug`}
              /&gt;
              &lt;Product
                path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug/:prodSlug`}
              /&gt;
              &lt;Blog path={`${locale}/blog`} /&gt;
              &lt;Article path={`${locale}/blog/:articleSlug`} /&gt;
              &lt;NotFound default /&gt;
            &lt;/Router&gt;
          &lt;/Layout&gt;
        &lt;/BlogState&gt;
      &lt;/BGTState&gt;
    )
  }
  </code></pre>
  <p>as you can see, I have different routers that load a specific component based on the url.
  I have prefixed each <code>path</code> with the current locale to match the correct path.
  This mechanism is working fine for the home page only, but for the other links doesn't work. Infact, if I visit something like:</p>
  <pre><code>http://localhost:3001/en/category-home/prod-foo
  </code></pre>
  <p>which must load the <code>Collection</code> component, the site simply redirect to:</p>
  <pre><code>http://localhost:3001/en
  </code></pre>
  <p>and display the <code>Home</code> component again.</p>
  <p>What I did wrong?</p>
  <p><strong>UPDATE</strong></p>
  <p>Page Structure:</p>
  <p><a href="https://i.stack.imgur.com/zDwqC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zDwqC.png" alt="enter image description here" /></a></p>
  <p>As you can see I have just the <code>index.js</code> which handle all requests as I configured in the <code>gatby-node.js</code>.
  If I remove the localization plugin, at least using this configuration:</p>
  <pre><code> {
        resolve: `gatsby-plugin-intl`,
        options: {
          // Directory with the strings JSON
          path: `${__dirname}/src/languages`,
          // Supported languages
          languages: [&quot;it&quot;, &quot;en&quot;, &quot;ci&quot;, &quot;fr&quot;],
          // Default site language
          defaultLanguage: `it`,
          // Redirects to `it` in the route `/`
          //redirect: true,
          // Redirect SEO component
          redirectComponent: require.resolve(
            `${__dirname}/src/components/redirect.js`
          ),
        },
      },
  </code></pre>
  <p>and I don't prefix the url with <code>intl.locale</code>, everything is working fine. But adding <code>redirect: true</code> in the plugin configuration, and prefixing the link with the locale, the site redirect me to the home component.</p>