Reactjs-router-dom и cordova всегда направляют в файл: ///android_asset/www/index.html

Question

Хорошо, поэтому я следовал этому методу и пытался создать приложение reactjs в сочетании с cordova, следовал всем шагам по этой ссылке , и она работала нормально, но когда я пытаюсь использовать react-router-dom каждый раз, когда я запускаю свое приложение на своем мобильном телефоне, он не загружает правильный компонент, а загружает путь file:///android_asset/www/index.html

Так что мой App.js ниже

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;

А мой index.js ниже импортируемого 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();
}

Я обновил свой код, чтобы использовать HashRoute вместо 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;

А вот мой компонент Register, который генерирует ошибку.

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;

В некоторых предложениях говорилось, что cordova обслуживает только локальные файлы и react-router-dom должен быть на сервере, но мне действительно нужно знать, возможно ли это сделать? любое предложение было бы замечательно.

Answer 1

Похоже, вам нужно использовать HashRouter вместо BrowserRouter:

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

Также здесь вы найдете несколько полезных ссылок на эту тему: Приложения Cordova с React , Основы React Router v4 .