Gatsby V2 is ruining my client-side route

Question

I have a Gatsby page, written as such:

import React from 'react';

import { RouteComponentProps, Router, Location } from "@reach/router"

export default () => {
    return (
        <Location>
            {({ location }) => (
                <Router location={location}>
                    <DefaultPage default />
                    <DetailsPage path="/:title/:id" />
                    <ItemsPage path="/:country/:description" />
                </Router>
            )}
        </Location>
    );
}

export const DefaultPage = (props: RouteComponentProps) => <div>Default</div>;

export const ItemsPage = (props: RouteComponentProps & {
    category?: string,
    description?: string
}) => <div>Items: {props.category}: {props.description}</div>;

export const DetailsPage = (props: RouteComponentProps & {
    title?: string,
    id?: string
}) => <div>Details: {props.title}: {props.id}</div>;

However, when deploying the site, and configuring the server to always serve the page no matter the URL, it seems Gatsby is rewriting my URL after loading the page, leading to the default page loading.

For instance, if I request /foo/bar, I instead get "redirected" to /.

I know it's a client-side navigation, because if I disable JavaScript in Chrome, the "redirect" to / doesn't happen. It also seems to only change the URL value in my browser, and not actually perform a real redirect, but I fear it is the cause of my pages not rendering properly.