[SOLVED] react-router in a CEP extension (e.g. Premiere Pro)

react-router in a CEP extension (e.g. Premiere Pro)

i am trying to use a react-router in a CEP extension. my routing looks like this:

let prefix = decodeURIComponent(window.location.pathname).replace("index.html", "")

  <Router>
      <Switch>
        <Route exact path={prefix + "index.html"} component={MainComponent} />
        <Route path={prefix + "other/:otherId"} component={OtherComponent} />
      </Switch>
  </Router>

This seems to be the only way to trick the router to accept the location of an extension - since it has a document.location of 'file://path/to/cep/extention/index.html'. The problem i am facing now, is that this only works on Mac - but consistently fails to match any path on windows. I suspect this is because the location on windows looks like: 'file:///C:/Program%20Files%20(x86)/Common%20Files/…be/CEP/extensions/extension-name/index.html' and the 'C:' confuses the router?

is there any way to trick the router to accept this kind of location URI?

Solution

Easy solution - use a HashRouter instead of a BrowserRouter. This also allows the use of normal paths:

import { Route, HashRouter as Router, Switch } from 'react-router-dom'
<Router >
  <Switch>
    <Route exact path="/" component={MainComponent} />
    <Route path="/other/:otherId" component={OtherComponent} />
  </Switch>
</Router>