developer-portal-starter icon indicating copy to clipboard operation
developer-portal-starter copied to clipboard

How to access route changes?

Open jdahdah opened this issue 3 years ago • 1 comments

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 avatar May 02 '22 12:05 jdahdah

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.

jdahdah avatar May 02 '22 13:05 jdahdah