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

Question

好的，所以我一直遵循此方法，并尝试创建与cordova结合使用的reactjs应用程序，按照此链接上的每个步骤进行，并且工作正常，但是当我每次在我的应用程序上运行我的应用程序时都尝试使用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";

同样在这里，您还可以找到有关此主题的一些有用链接： 带有React的Cordova应用程序 ，React Router v4的基础知识 。