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

Я пытаюсь создать страницу подтверждения регистрации в моем проекте 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>

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

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


reactjs javascript gatsby reach-router
person Mike Boutin    schedule 15.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

если вы хотите избежать ошибки 404, вы должны перенаправить на своем веб-сервере с /client-side-page/* на /client-side-page/index.html, т.е. с ngnix:

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

другого пути нет.

person gpilotino    schedule 31.07.2019