Reactjs-router-dom和cordova始终直接指向file：///android_asset/www/index.html

Question

Ok so I've been following this method and attempting to create a reactjs application combined with cordova , followed every steps on this link and it was working fine but when I try to use react-router-dom every time I run my app on my mobile it doesn't load the correct component instead it loads a path file:///android_asset/www/index.html

So my App.js is below

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 (
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/" component={Main} exact />
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
            <Route path="/Forgot" component={Forgot} />
            <Route component={Error} exact />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

And my index.js is below importing the App.js

import React from "react";
import ReactDOM from "react-dom";
import "./css/main.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

const startApp = () => {
  ReactDOM.render(<App />, document.getElementById("root"));
  registerServiceWorker();
};

if (window.cordova) {
  document.addEventListener("deviceready", startApp, false);
} else {
  startApp();
}

I updated my code to use HashRoute instead of BrowserRoute

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 (
      <HashRouter history={history}>
        <div>
          <Switch>
            <Route path="/" component={Login} exact />
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
            <Route path="/Forgot" component={Forgot} />
            <Route component={Error} exact />
          </Switch>
        </div>
      </HashRouter>
    );
  }
}

export default App;

And here is my component Register which generate the error.

import React, { Component } from "react";
import Footer from "./Footer";

class Register extends Component {
  render() {
    return (
      <div>
        <div className="container-login">
          <div className="login-content">
            <div className="login-form">
              <img
                src="img/long logo.png"
                alt="main_log"
                className="img-responsive"
              />

              <div className="input-container">
                <i className="fa fa-user icon" />
                <input
                  className="input-field"
                  type="email"
                  autocomplete="off"
                  placeholder="Full Name"
                  name="email_user"
                />
              </div>
              <div className="input-container">
                <i className="fa fa-envelope icon" />
                <input
                  className="input-field"
                  type="email"
                  autocomplete="off"
                  placeholder="Email"
                  name="email_user"
                />
              </div>
              <div className="input-container">
                <i className="fa fa-key icon" />
                <input
                  className="input-field"
                  type="password"
                  placeholder="Password"
                  name="password"
                />
              </div>
              <div className="input-container">
                <i className="fa fa-key icon" />
                <input
                  className="input-field"
                  type="password"
                  placeholder="Repeat password"
                  name="password"
                />
              </div>
              <div className="input-container">
                <button>Register</button>
              </div>
              <div className="option-section">
                <p>
                  <span>
                    <a href="/forgot">Forgot Password / </a>
                  </span>
                  <span>
                    <a href="/login">Login</a>
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <Footer />
      </div>
    );
  }
}

export default Register;

Some suggestions said that cordova only serve local files and react-router-dom must be on a server but I really need to know if this is possible to do? any suggestion would be great.

Answer 1

It seems that you have to use a HashRouter instead of BrowserRouter :

import { HashRouter } from "react-router-dom";

Also here you are some useful links about this theme: Cordova Apps with React , Basics of React Router v4 .