Can I use both Hash Router and normal router in different builds?

Question

I want to make a fully responsive site, and I want to wrap it with Cordova to make a mobile app.

But Cordova only supports hash router.

Can I make my mobile build use Hash Router instead of the normal one, using only one codebase? Or what would be a good routing strategy considering this code reuse need?

i.e Cordova build will use /index.html#user/profile and the web page will use /user/profile

Answer 1

If I recall correctly, Cordova builds will inject a cordova property into the global window object. You can check if the current app build is for Cordova and conditionally use one router or the other.

Example:

import {
  HashRouter,
  BrowserRouter,
} from 'react-router-dom';

const App = () => {
  const AppRouter = React.useMemo(() => {
    return window.cordova ? HashRouter : BrowserRouter;
  }, []);

  return (
    <AppRouter>
      ...
    </AppRouter>
  );
};