title: Reactjs-router-dom and cordova always direct to file:///android_asset/www/index.html
body: <p>Ok so I've been following this method and attempting to create a <code>reactjs</code> application combined with <code>cordova</code>, followed every steps on this <a href="https://github.com/johnkmzhou/cordova-create-react-app" rel="nofollow noreferrer">link</a> and it was working fine but when I try to use <code>react-router-dom</code> every time I run my app on my mobile it doesn't load the correct component instead it loads a path <code>file:///android_asset/www/index.html</code></p>
  
  <p>So my <code>App.js</code> is below</p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter, Router, Route, Switch } from "react-router-dom";
  import Login from "./components/Login";
  import Register from "./components/Register";
  import Error from "./components/Error";
  import Forgot from "./components/Forgot";
  import Main from "./components/Main";
  
  class App extends Component {
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;div&gt;
            &lt;Switch&gt;
              &lt;Route path="/" component={Main} exact /&gt;
              &lt;Route path="/login" component={Login} /&gt;
              &lt;Route path="/register" component={Register} /&gt;
              &lt;Route path="/Forgot" component={Forgot} /&gt;
              &lt;Route component={Error} exact /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>And my <code>index.js</code> is below importing the <code>App.js</code></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import "./css/main.css";
  import App from "./App";
  import registerServiceWorker from "./registerServiceWorker";
  
  const startApp = () =&gt; {
    ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));
    registerServiceWorker();
  };
  
  if (window.cordova) {
    document.addEventListener("deviceready", startApp, false);
  } else {
    startApp();
  }
  </code></pre>
  
  <p>I updated my code to use HashRoute instead of BrowserRoute</p>
  
  <pre><code>import React, { Component } from "react";
  import {
    BrowserRouter,
    Router,
    Route,
    Switch,
    HashRouter
  } from "react-router-dom";
  import Login from "./components/Login";
  import Register from "./components/Register";
  import Error from "./components/Error";
  import Forgot from "./components/Forgot";
  import createHashHistory from "history/createHashHistory";
  
  let history = createHashHistory();
  
  class App extends Component {
    render() {
      return (
        &lt;HashRouter history={history}&gt;
          &lt;div&gt;
            &lt;Switch&gt;
              &lt;Route path="/" component={Login} exact /&gt;
              &lt;Route path="/login" component={Login} /&gt;
              &lt;Route path="/register" component={Register} /&gt;
              &lt;Route path="/Forgot" component={Forgot} /&gt;
              &lt;Route component={Error} exact /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/HashRouter&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>And here is my component <code>Register</code> which generate the error.</p>
  
  <pre><code>import React, { Component } from "react";
  import Footer from "./Footer";
  
  class Register extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;div className="container-login"&gt;
            &lt;div className="login-content"&gt;
              &lt;div className="login-form"&gt;
                &lt;img
                  src="img/long logo.png"
                  alt="main_log"
                  className="img-responsive"
                /&gt;
  
                &lt;div className="input-container"&gt;
                  &lt;i className="fa fa-user icon" /&gt;
                  &lt;input
                    className="input-field"
                    type="email"
                    autocomplete="off"
                    placeholder="Full Name"
                    name="email_user"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-container"&gt;
                  &lt;i className="fa fa-envelope icon" /&gt;
                  &lt;input
                    className="input-field"
                    type="email"
                    autocomplete="off"
                    placeholder="Email"
                    name="email_user"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-container"&gt;
                  &lt;i className="fa fa-key icon" /&gt;
                  &lt;input
                    className="input-field"
                    type="password"
                    placeholder="Password"
                    name="password"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-container"&gt;
                  &lt;i className="fa fa-key icon" /&gt;
                  &lt;input
                    className="input-field"
                    type="password"
                    placeholder="Repeat password"
                    name="password"
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-container"&gt;
                  &lt;button&gt;Register&lt;/button&gt;
                &lt;/div&gt;
                &lt;div className="option-section"&gt;
                  &lt;p&gt;
                    &lt;span&gt;
                      &lt;a href="/forgot"&gt;Forgot Password / &lt;/a&gt;
                    &lt;/span&gt;
                    &lt;span&gt;
                      &lt;a href="/login"&gt;Login&lt;/a&gt;
                    &lt;/span&gt;
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Register;
  </code></pre>
  
  <p>Some suggestions said that <code>cordova</code> only serve local files and <code>react-router-dom</code> must be on a server but I really need to know if this is possible to do? any suggestion would be great.</p>