Gatsby 在使用 gatsby-plugin-react-i18 时找不到客户端路由下一页

Question

我在Gatsby中使用客户端路由和gatsby-plugin-react-i18next。当我尝试在不使用默认语言的情况下访问其中一个客户端路由时，例如url前缀为/sv，我会发现该路由不存在。如果我将前缀/sv添加到基于路由器的路径，则Default组件/路径正在工作，而不是Profile组件/路径。

当使用不带/sv前缀的默认语言时，一切都按预期进行。

src/pages/account.tsx

<Router basepath={'/account'}>
<AccountRoute path="/profile" component={Profile} />
<Default path="/" />
</Router>

gatsby-node.js

exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^/account/)) {
page.matchPath = "/account/*"
createPage(page)
}
}

我还尝试将前缀/sv添加到gatsby-node.js中的matchPath，但随后我被重定向到不存在的双前缀/sv/sv路由。如果我告诉gatsby-plugin-react-i18next不要为帐户页面生成语言页面，我会得到相同的结果。

gatsby-config.js

{
resolve: `gatsby-plugin-react-i18next`,
options: {
...
},
pages: [
{
matchPath: '/:lang?/account/(.*)',
getLanguageFromPath: true
},
]
}

Answer 1

我们要解决：

1. 让lang前缀工作
2. 使默认页面(无lang前缀(工作

为此，我目前使用的解决方案是：

gatsby-node.js:

function langPrefix(page) {
return page.context.language === page.context.i18n.defaultLanguage &&
!page.context.i18n.generateDefaultLanguagePage
? ''
: `/${page.context.language}`
}

exports.onCreatePage = ({ page, actions }) => {
const { createPage } = actions
// Removing the ^ skips an optional /:lang prefix
if (page.path.match(//app/)) {
// adding lang if it's not the default page.
page.matchPath = `${langPrefix(page)}/app/*`
createPage(page)
}
}

此外，我复制了路由来处理带有和不带有lang前缀的情况：

<...>
{/* Version for default language (no /:lang/ in path) */}
<Router basepath={`/app`}>
<ViewerWrapper path="/:myProp" />
</Router>
{/* Version for explicit language (/:lang/ in path) */}
<Router basepath={`/:lang/app`}>
<ViewerWrapper path="/:myProp" />
</Router>
</...>

现在继续简化：(

道具马里奥·斯克莱克和奥兹布鲁的方法。