javascript - Gatsby 混合应用程序 - 使用“createPage”中的模板构建的页面上的子路由问题
问题描述
编辑:我忘了提到我的网站包含从这个模板构建的大约 25k 页面。Derek Nguyen 的回答将适用于页面数量较少的小型网站,但是当扩大规模时,matchPath
数据将存储在 JS 中,导致捆绑包大小很大。(对我来说大约 3.1mb!)
挑战
我需要创建一个页面,createPage
其中包含一个子路由系统,其中默认路由构建为静态 HTML,但任何其他路由都是客户端专用的。
问题
我在方法中有一个用于静态 HTML 生成的模板组件createPage
,还有一个pages/
目录中的组件,用于为仅限客户端的路由分配一个matchPath
to。
在最新版本的 Gatsby 上,模板组件为默认路由呈现,但随后“页面”组件为仅客户端呈现,当我只希望子路由呈现时,导致整页重新呈现,如父路由中有需要持久化的数据。
在我看来,有两个组件和两个路由器似乎是错误的,但我想不出任何其他方式来实现我想要实现的目标。
这是我的路由设置的示例:
模板用于createPage
<Router>
<ContainerComponent
path={urlFromGraphQL}
>
<DefaultRoute
default
/>
</ContainerComponent>
</Router>
仅客户端组件/pages
<Router>
<ContainerComponent
path="/some-route/:slug/:id"
>
<DefaultRoute
default
/>
<SecondTabRoute
path="second-tab-route"
/>
<ThirdTabRoute
path="third-tab-route"
/>
</ContainerComponent>
</Router>
我还复制了这个代码框中的行为。确保转到https://hkhbb.sse.codesandbox.io/test/foo/bar以查看正确的输出。
我在 github 上创建了一个关于此的问题,但还没有回复。
解决方案
问题
看起来您正在混合静态生成的页面和动态页面,即您在/test/foo/bar
匹配时都test/:param1/:param2
在生成页面test.js
。
静态生成的页面将比动态页面具有更高的特异性,因此 Gatsby 认为test/foo/bar
&test/foo/bar/second-route
是 2 个不同的页面,而不是来自同一个静态页面的 2 个动态路由。
潜在的解决方案
在这种情况下,您需要做的是为动态路由制作两个 /test
&/test/foo/bar
根页面。这样,随机匹配/test/one/two
将成为/test
; while/test/foo/bar/second-route
将是 的动态路由/test/foo/bar
。
由于您已经/test/foo/bar
以编程方式创建,因此将其作为动态页面的根是微不足道的:
// gatsby-node.js
exports.createPages = async ({ actions }) => {
const { createPage } = actions
const pathFromGraphQL = "/test/foo/bar"
createPage({
component: path.resolve(`./src/templates/template.js`),
context: {
url: pathFromGraphQL,
},
path: pathFromGraphQL,
+ matchPath: `${pathFromGraphQL}/*`,
})
}
现在的问题是“template.js”不再完全是模板,它必须包含特定于test/foo/bar
. 根据您的要求,这可能是一个阻碍,也可能以某种方式被规避。
我稍微编辑你的叉子来证明这一点;除了上面的代码更改之外pages/test.js
,templates/template.js
我还添加了一个虚拟组件,pages/test.js
以显示它仍然可以处理其他动态路由:
此外,如果您决定这样做,请注意这个“不会修复”错误。
推荐阅读
- python - 如何在情节中将悬停数据转换为货币?
- ios - Swift:在水平线上垂直堆叠文本
- r - 如何在 R 中创建曲面图
- python - 从 SQL 服务器获取百万条记录并保存到 pandas 数据框
- algorithm - 这段代码的时间复杂度是多少?
- java - 休眠分页未按预期工作
- html - 是否可以用六个 iframe 制作一个立方体?
- javascript - 如何手动制作firebase动态链接?
- python - 我正在制作一个 Whack a Mole 游戏,当用户单击鼹鼠图像时,他会得到一个点。我无法弄清楚如何做到这一点
- android - Class not found. Test class not found