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

【问题标题】：How can I set a default component on client-side only Gatsby.js page如何在仅客户端 Gatsby.js 页面上设置默认组件
【发布时间】：2019-01-15 15:48:26
【问题描述】：

我正在尝试在我的 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>

有没有办法做到这一点，或者我应该找到另一种方法来管理这个？

感谢您的帮助！

【问题讨论】：

标签： javascript reactjs gatsby reach-router

【解决方案1】：

如果您想避免 404，您必须在您的网络服务器中放置一个从 /client-side-page/* 到 /client-side-page/index.html 的重定向，即。使用 ngnix：

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

没有其他办法。

【讨论】：