React conditional router for Cordova

Question

I'm trying to switch between hash history and browser history for a React app in Cordova.

On the web I want to use Browser history, in Cordova I have to use HashHistory

I've tried something like

import createBrowserHistory from 'history/createBrowserHistory'
import createHashHistory from 'history/createHashHistory'


export default window.cordova ? createHashHistory() : createBrowserHistory()

But nothing loads.

createHashHistory() works fine. 

Is there anyway to make this conditional?

i.e. so in cordova it uses hash history and if not it will use the browser history?

The issue is highlighted here with this hack

   let baseName = document.location.pathname.split('index.html')[0] + 'index.html';

But I'm not sure how to implement this conditionally.

Answer 1

import React from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/createBrowserHistory'
import createHashHistory from 'history/createHashHistory'
import App from './App'

var history
const startApp = () => {
    ReactDOM.render(
        <Router history={history} >
            <Route component={App} />
        </Router>,
    document.getElementById('root'));
}

if(!window.cordova) {
    history = createBrowserHistory()
    startApp()
}
else{
    history = createHashHistory()
    document.addEventListener('deviceready', startApp, false)
}