Question

我正在尝试在我的Gatsby项目中建立一个注册确认页面。我从在https://github.com/DWboutin/gatsby-react-intl-starter这里创建的状态程序开始。

在gatsby-node.js中，我设置了一个pageMatch道具以使我的页面可以处理提供的ID。（请注意，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

如果要避免使用404，则必须在Web服务器中从/client-side-page/*重定向到/client-side-page/index.html，即。使用ngnix：

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

没有其他解决办法。

如何在仅客户端的Gatsby.js页面上设置默认组件

1 个答案: