如何在僅客戶端的Gatsby.js頁面上設置默認組件

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到/client-side-page/index.html即。 使用ngnix：

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

別無他法。