Using React Routing in the Looker Extension Framework

[tonbodin]

@izzymiller

Hello! 

We have been using your Looker Extension Framework on github to design our company’s Looker Interface: https://github.com/looker-open-source/extension-template-react

The website looks great so far thanks to your template :). We want to use React Router (imported from react-router-dom) to control our page transitions, however we are running into some issues with getting the transitions to work. Our goal is to render another javascript file when a certain button is clicked on the homepage. 

The BrowserRouter seems to be changing the path of the website, but the contents that we would like to render aren’t being rendered. This is the precise problem that we are encountering (CANNOT GET \path):

https://ui.dev/react-router-cannot-get-url-refresh/

I have a hunch that this is because server-side routing has not been set up on the looker extension template. We were wondering if you could provide some guidance on how we can set up server-side routing to handle our transitions. 

Thank you!

[izzymiller]

First off, I’m glad you’re finding the templates useful! 

I think you might find some of the more complex templates/examples instructive. The “Kitchen Sink” example, which is a bit confusing because it includes pretty much everything, uses react-router with a sidebar component to switch routes:

https://github.com/looker-open-source/extension-examples/tree/main/react/typescript/kitchensink

The meat is in this file, where the routes and routing are defined. I haven’t tested with a Router or BrowserRouter, but in this example we actually don’t use a Router object and instead set up route state more manually. I don’t recall, but it’s possible this is because of the limitation that you noticed.

For a simpler example, the looks-query example also uses react-router— but just to collect the ID of a Look to run, so it’s not as close to the functionality you’re looking for, where you want to render a different component per route. 

Take a look at that + the kitchen sink and see if that’s helpful, and feel free to ask any questions if things aren’t working!