Redocly / developer-portal-starter

Starter template for the Redocly developer portal
https://redoc.ly
Other
64 stars 101 forks source link

How to access route changes? #205

Open jdahdah opened 2 years ago

jdahdah commented 2 years ago

In order to implement analytics, we need to be able to access route changes. In Gatsby, we make use of onClientEntry and onRouteUpdate since it behaves like an SPA. Your developer portal is built on Gatsby, but as far as I can tell, it does not expose these APIs for further use. There was a feature request for something like this in May 2020, but no reactions from Redocly. Could you please advise on how we could watch route changes with the current version of @redocly/developer-portal?

jdahdah commented 2 years ago

Figured it out based on this example. For anyone else who needs this:

You can override the global <App /> wrapper component by creating _override/App.tsx, then doing something like this:

import * as React from "react"
import type { Location } from "history"

export function App({
  children,
  location,
}: React.PropsWithChildren<{ location: Location }>) {
  React.useEffect(() => {
    /*
      Do something useful here or pass it into a child component below
      that would handle the setup and logging of analytics.
    */
    console.log(location)
  }, [location])

  return (
    <div>
      {children}
    </div>
  )
}

The history library is already included by @redocly/developer-portal.