Gatsby 浏览器 API

用法

从项目根目录下的一个名为 gatsby-browser.js 的文件的导出实现了这些 API。

APIs


参考

onClientEntry

Called when the Gatsby browser runtime first starts.

示例

exports.onClientEntry = () => {
  console.log("We've started!")
  callAnalyticsAPI()
}

onInitialClientRender

Called when the initial (but not subsequent) render of Gatsby App is done on the client.

示例

exports.onInitialClientRender = () => {
  console.log("ReactDOM.render has executed")
}

onRouteUpdate

Called when the user changes routes

参数

destructured object
location {object}

A location object

action {object}

The “action” that caused the route change

示例

exports.onRouteUpdate = ({ location }) => {
  console.log('new pathname', location.pathname)
}

replaceComponentRenderer

Allow a plugin to replace the page and layout component renderer. This api runner can be used to implement page transitions. See https://github.com/gatsbyjs/gatsby/tree/master/examples/using-page-transitions for an example of this.

参数

destructured object
props {object}

The props of the page or layout.

loader {object}

The gatsby loader.

replaceHistory

Allow a plugin to replace the history object.

replaceRouterComponent

Allow a plugin to replace the router component e.g. to use a custom history version.

参数

destructured object
history {object}

The history instance to use in the replacement router instance

shouldUpdateScroll

Allow a plugin to decide if the “scroll” should update or not on a route change.

参数

destructured object
prevRouterProps {object}

The previous state of the router before the route change.

pathname {object}

The new pathname

wrapRootComponent

Allow a plugin to wrap the root component.

参数

destructured object
Root {object}

The “Root” component built by Gatsby.

Docs
Tutorial
Community
Blog