React BrowserRouter issues in Hosted Test

Extensions
1

Hi all,

Not a question, but perhaps some useful info that can help some out.
I created an extension using React and was using the BrowserRouter from react-router-dom
My import was the following:

import { HashRouter as Router, Route, Routes } from "react-router-dom";

and my “routing” code:

  <Router>
    <Routes>
      <Route path="/panel" element={<ParentContainer />} />
      <Route path="/config" element={<ConfigPage />} />
    </Routes>
  </Router>

On the Asset Hosting tab of the twitch dev console i had configured:

- Panel viewer path: panel
- Config Path: config

I tried a whole lot of stuff, but could not get this to work for me. It worked fine when on local test, but not in hosted test.
After a lot of trial and error, I had to change the routing to get it to work. The most simple solution for me was:

Change your import to :

import { HashRouter as Router, Route, Routes } from "react-router-dom";

*Note, now using HashRouter instead of BrowserRouter

On the Asset Hosting tab of the twitch dev console change to :

- Panel viewer path: #/panel
- Config Path: #/config

The extension then worked in both localtest and hosted test! (at least for me, i hope for you as well)

I hope it is okay to create a topic for this, even though it’s not a question but more a FIY

2

Ideally you shouldn’t be using a router at all to display the different Extension views, but instead have your bundler such as webpack use multiple entry points to output each view as its own HTML, JS, CSS etc… as that’d reduce the size of each view as they’re not having to load any code not used by that view, improve performance, and not need any sort of router.

3

This goes for angular too, I’ve had much more luck getting the app to run using hash routing than normal routing.