Skip to content
This repository has been archived by the owner on Aug 18, 2023. It is now read-only.

How to access route changes? #205

Open
jdahdah opened this issue May 2, 2022 · 1 comment
Open

How to access route changes? #205

jdahdah opened this issue May 2, 2022 · 1 comment

Comments

@jdahdah
Copy link

jdahdah commented May 2, 2022

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 jdahdah changed the title How to access route updates? How to access route changes? May 2, 2022
@jdahdah
Copy link
Author

jdahdah commented May 2, 2022

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant