带有语言键的404页面的盖茨比路由问题

时间:2019-11-11 07:04:04

标签: routing gatsby

我正在建立一个支持多种语言的博客。网址包含语言键,例如/en/blog。我遇到了本地化404页面的问题。 https://www.gatsbyjs.org/docs/creating-prefixed-404-pages-for-different-languages/此处描述的内容适用于除首页以外的所有路由。主页具有以下URL www.test.com/en,由于此正则表达式/^\/[a-z]{2}\/404\/$/,其最终以404页面结尾 我试图传递一个正则表达式^\/?[a-z]{2}\/.+来匹配除/en以外的所有路由,但matchPath似乎除了正则表达式之外都没有。

页面在引擎盖下排名;但是,似乎/en/en/does-not-exist受到相同的对待,否则后者优先于前者。

我想知道以前是否有人遇到过这个问题,也许有解决方法。

就目前而言,我有一个通用的404页,还为所有可用语言提供了单独的404页。在通用404中,我想重定向到特定于语言的404版本。它增加了我想避免的复杂性。

任何帮助表示赞赏。谢谢!

1 个答案:

答案 0 :(得分:0)

结果证明这是一个everything in match-paths.json已知问题。 https://github.com/gatsbyjs/gatsby/issues/19228

目前,我的解决方法是使用基于语言键的重定向。

我有一个默认的404页面和特定于语言的404页面,例如/en/404。 在默认的404页面内,我只是重定向了谎言:

import { useEffect } from 'react';
import { navigate } from 'gatsby'

// Assuming the urls are structured this way /en/blog/does-not-exist
const getLanguage = (location) => location.pathname.split('/')[1]

const NotFoundPage = ({ location }) => {
  useEffect(() => {
    navigate(`/${getLanguage(location)}/404`, { replace: false })
  }, []);

  return null
}

export default NotFoundPage

这不是最好的解决方案,但目前可以完成。我有更好的解决方案后将发布更新。