前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >gatsby-browser.js有什么作用?

gatsby-browser.js有什么作用?

原创
作者头像
Learn-anything.cn
修改2021-12-02 08:56:21
1K0
修改2021-12-02 08:56:21
举报
文章被收录于专栏:learn-anything.cn
一、简介

Gatsby 在 gatsby-browser.js 文件中提供了一些API,可供开发者 监控浏览器的特定事件 和 写一些全局组件。

二、API 说明
1、onRouteUpdate
  • 功能:监控页面切换的事件
代码语言:javascript
复制
  // gatsby-browser.js
  const React = require("react")
  // Logs when the client route changes
  exports.onRouteUpdate = ({ location, prevLocation }) => {
代码语言:txt
复制
console.log("new pathname", location.pathname)
代码语言:txt
复制
console.log("old pathname", prevLocation ? prevLocation.pathname : null)
代码语言:javascript
复制
  }
2、wrapPageElement
  • 功能:用于plugin,给所有页面增加一层父容器
代码语言:txt
复制
 // gatsby-browser.js
  const React = require("react")
  const Layout = require("./src/components/layout")
  // Wraps every page in a component
  exports.wrapPageElement = ({ element, props }) => {
代码语言:txt
复制
return <Layout {...props}>{element}</Layout>
代码语言:txt
复制
  }
三、重要规则
1、一致性

gatsby-ssr.jsgatsby-browser.js 这两个文件中都提供了这两个API:wrapPageElementwrapRootElement 。所以要保持两个文件中这两个API的代码一致性。

四、参考文档

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、简介
  • 二、API 说明
    • 1、onRouteUpdate
      • 2、wrapPageElement
      • 三、重要规则
        • 1、一致性
        • 四、参考文档
        相关产品与服务
        网站建设
        网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档