How to use React HashRouter for route parameters?

Question

I have two routes, a base path and a customer route. The customer route takes a customerId parameter.

  <HashRouter>
    <Switch>
      <Route path="/mapper/:mappingId/" exact component={Mapper}/>
      <Route path="/" exact component={App} />
    </Switch>
  </HashRouter>

then in the react component I am calling it like this to navigate

      window.open(`/customer/${customerId}`)

(updated, still doesn't work)

but when I navigate it just goes to the App component. I have to use HashRouter because the react app is wrapped in Electron. BrowserRouter works on the web

The url i get when i navigate is this: http://localhost:3000/customer/ca023754-bb75-4f64-a19c-958525b53e12#/ I also tried adding backslash in Route, /customer/:customerId/, that didn't work as well

I have read How to use React Router with Electron? but it doesn't really work

It might be a good idea to place the '/' first with exact path and also put your routes inside a switch. — sylar12
I updated the code snippet and tried to put "exact" before and after path variables. Doesn't work still — Jeff Peng

Jeff Peng Jeff Peng · Accepted Answer · 2019-12-13T15:25:25

I finally figured this out. Hashrouter expect the url to have "#/" after the basepath. so it should be window.open('#/customer/${customerId}')

How to use React HashRouter for route parameters?

1 Answers