ReactJS Cordova 路由器问题答案

【问题标题】：ReactJS Cordova Router issueReactJS Cordova 路由器问题
【发布时间】：2018-04-30 10:46:03
【问题描述】：

我正在使用 ReactJS 和 Cordova 创建一个简单的应用程序。当我通过 reacts npm start 运行该应用程序时，它运行良好。但是，当我执行 npm run build 并将 build 文件夹复制到我的 cordova 项目的 www 文件夹中时，当我在 android 中运行它时出现空白屏幕。如果我使用科尔多瓦运行浏览器，路由器将无法正常工作，并且它会在 index.html 处着陆。我想我已经将它缩小到cordova 的路由器问题，其中路由没有将页面设置为主页。有没有其他人遇到过这样的问题？我使用 npm create-react-app 创建了我的 reactJS 项目。

https://github.com/bscott8605/reactRouterTest

文件夹结构

import React, { Component } from 'react'
import { BrowserRouter as Router } from 'react-router-dom'
import { Switch, Route } from 'react-router'
import Home from './Home'
import AddNote from './AddNote'
import Note from './Note'

class Main extends Component {    
    render() {
      let notes;

      if(this.props.notesList)
      {
          //console.log(this.props);
          notes = this.props.notesList.map(note => {
              return(
                  <Note key={note.title} note={note} />
              );
          });
      }
      return (
          <Router>
        <div>
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <Route path='/AddNote' component={AddNote}/>
                    {/*<Route exact path='/' render={(props) => (<Home {...props} data={notes}/>)}/>
                    <Route exact path='/AddNote' render={(props) => (<AddNote {...props} addNoteMethod={this.props.addNoteMethod}/>)}/>*/}
                </Switch>
        </div>
       </Router>
      );
    }
  }

  export default Main;

【问题讨论】：

标签： android reactjs cordova react-router-v4

【解决方案1】：

将 BrowserRouter 更改为路由器

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import createHistory from 'history/createHashHistory'

import store from './app/redux/store';
import Layout from './app/pages/layout';
import Routes from './app/pages/routes';

import './app/assets/favicon.ico';
import './app/assets/scss/main.scss';

const history = createHistory();
console.log(history);
const Dom = (
  <Provider store={store}>
    <Router history={history}>
      <Layout>
        <Routes />
      </Layout>
    </Router>
  </Provider>
);

ReactDOM.render(
  Dom,
  document.getElementById('app'),
);

【讨论】：