如何解决单页网站不能使用 gatsby-plugin-intl
我正在使用 Gatsby
并且我想构建一个单页站点,因此无需创建页面。为此,我使用以下代码编辑了 gatsby-node.js
:
exports.onCreatePage = async ({ page,actions }) => {
const { createPage } = actions
if (page.path === "/") {
page.matchPath = "/*"
createPage(page)
}
}
在这种情况下,每个请求都会重新路由到 index.js
页面,这是唯一的一个。
然后,在 index.js
页面中,我有:
const IndexPage = () => {
const intl = useIntl()
const locale = intl.locale
return (
<BGTState>
<BlogState>
<Layout>
<Router>
<Home path={`${locale}/`} />
<Section path={`${locale}/:sectionSlug`} />
<Collection path={`${locale}/:sectionSlug/:collectionSlug`} />
<Season
path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug`}
/>
<Product
path={`${locale}/:categorySlug/:collectionSlug/:seasonSlug/:prodSlug`}
/>
<Blog path={`${locale}/blog`} />
<Article path={`${locale}/blog/:articleSlug`} />
<NotFound default />
</Router>
</Layout>
</BlogState>
</BGTState>
)
}
如您所见,我有不同的路由器根据 url 加载特定组件。
我在每个 path
前面加上了当前语言环境的前缀以匹配正确的路径。
此机制仅适用于主页,但不适用于其他链接。事实上,如果我访问类似的东西:
http://localhost:3001/en/category-home/prod-foo
必须加载 Collection
组件,网站只需重定向到:
http://localhost:3001/en
并再次显示 Home
组件。
我做错了什么?
更新
页面结构:
如您所见,我只有 index.js
来处理我在 gatby-node.js
中配置的所有请求。
如果我删除本地化插件,至少使用此配置:
{
resolve: `gatsby-plugin-intl`,options: {
// Directory with the strings JSON
path: `${__dirname}/src/languages`,// Supported languages
languages: ["it","en","ci","fr"],// Default site language
defaultLanguage: `it`,// Redirects to `it` in the route `/`
//redirect: true,// Redirect SEO component
redirectComponent: require.resolve(
`${__dirname}/src/components/redirect.js`
),},
而且我没有在网址前加上 intl.locale
,一切正常。但是在插件配置中添加 redirect: true
并在链接前加上语言环境,站点会将我重定向到主页组件。
解决方法
如果您正在创建 SPA(S单P年龄A应用程序,请注意单)您除了 index.html 之外,不会有任何创建的页面。您正在尝试访问未创建的 /category
页面,因为:
if (page.path === "/") {
page.matchPath = "/*"
createPage(page)
}
这就是为什么您的路线不起作用(或者换句话说,只有主页有效)。
根据您的需要调整先前的条件,以允许根据您的要求创建更多页面。
我正在使用 Gatsby 并且我想建立一个单页网站,所以没有 创建页面。为了实现这一点,我编辑了 gatsby-node.js 以下代码:
尝试使用 Gatsby 构建 SPA 应用程序(不创建页面)是没有意义的,但由于没有创建集合页面而抱怨。
确保您了解自己在做什么,显然您需要为每个 collection
、season
和 product
创建动态页面,以便您创建 SPA 的方法获胜不适用于您的用例。
是否可以只保留 index.js 而不会使事情变得过于复杂?一世 只是想了解为什么我的代码不起作用,因为我已经通过了 正确的 url... 删除本地化 Gatsby 工作,所以我 怀疑是本地化问题
解决 http://localhost:3001/category-home/prod-foo
(删除本地化)的唯一方法是创建一个文件夹结构,例如 /pages/category-home/prod-foo.js
(因为 Gatsby 将文件夹结构推断为 URL),因此,如果您想使用使用您的方法进行本地化,添加诸如 en/pages/category-home/prod-foo.js
和 es/pages/category-home/prod-foo.js
(或任何语言环境)之类的结构,等等。在我看来,这是过于复杂的东西,因为对于每个类别,您都需要创建 2 个(甚至更多,具体取决于语言环境)文件。
Gatsby 允许您创建动态页面并使用进程中的内置插件自动插入语言环境,为特定定义的语言环境创建每个文件。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。