Как установить компонент по умолчанию только на клиентской стороне Gatsby.js?

Question

Я пытаюсь создать страницу подтверждения регистрации в моем проекте Gatsby. Я начал со статера, который создал здесь https://github.com/DWboutin/gatsby-react-intl-starter.

В gatsby-node.jsЯ установил реквизит pageMatch, чтобы моя страница обрабатывала предоставленные идентификаторы. (Обратите внимание, что value является частью моего процесса построения языка)

if (page.path.match(/^\/client-side-page/)) {
    page.matchPath = (value !== baseLanguage) ? `/${value}/client-side-page/*` : '/client-side-page/*';
}

С этим я могу получить доступ к странице /client-side-page/{MY ID}, На этой странице я использую reach/router чтобы получить :id в пути и сделать форму подтверждения только тогда, когда она предоставлена.

Все работает, но, когда я загружаю страницу напрямую, она показывает мне компонент 404.

Я попытался установить компонент маршрута по умолчанию, когда он не может найти правильный путь. Но он продолжает показывать мне 404, прежде чем показывать его.

<Router basepath={`/${pageContext.matchPath.replace('/*', '/')}`}>
    <ClientSignupDefault default />
    <ClientSignup path=":id" />
</Router>

Есть ли способ сделать это или я должен найти другой способ справиться с этим?

Спасибо за помощь!

Answer 1

If you want to avoid the 404 you must place a redirect in your web server from /client-side-page/* to /client-side-page/index.html ie. with ngnix:

rewrite ^/client-side-page/([^.]*?/)$ /client-side-page/index.html;

there's no other way around this.