React Router не отображает первую страницу в apk, созданном в Кордове

Question

Я создал приложение с ReactJS, и оно отлично работает в браузере. Моя цель - создать из него приложение для Android / iOS, и я выбрал для него Cordova. Некоторые компоненты видны в коде ниже.

Все отлично работает в браузере - при запуске отображается EventsPage компонент, а также MenuBar внизу.

Тем не менее, в Android-приложении, созданном с помощью Cordova, я вижу только MenuBar внизу, но EventsPage не отображается. Я могу перемещаться по приложению с помощью MenuBar, и оно работает как надо, но проблема при запуске.

App.js:

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

import MenuBar from "./components/MenuBar";

import { BrowserRouter as Router } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <Router>
        <MenuBar />
      </Router>
    );
  }
}

export default App;

MenuBar.js:

import React, { Component } from 'react';
import { css } from 'emotion';

import { BrowserRouter as Router } from 'react-router-dom';

class MenuBar extends Component {

  // some divs with menu items

        <Route path="/" exact component={EventsPage} />
        <Route path="/favorites/" component={Favorites} />
        <Route path="/party/" component={PartyPage} />
        <Route path="/about-festival/" component={AboutFestival} />
        <Route path="/details/:id" component={EventDetails} />
      </>
    );
  }
}

export default MenuBar;

Как я могу это исправить? Я думаю, что мне нужно сделать немного больше настроек для Cordova, но я нигде не могу найти никакой полезной документации для этого.

Любая информация полезна, спасибо!

Answer 1

Я просто хочу сказать, что я нашел решение -use HashRouter вместо BrowserRouter! Итак, мой App.js теперь выглядит так:

import React, { Component } from 'react';
import './App.css';

import MenuBar from './components/MenuBar';

import { HashRouter as Router } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <Router>
        <MenuBar />
      </Router>
    );
  }
}

export default App;

Я также добавил "homepage": "./", в мой файл package.json, прямо над dependencies.

Сломанный маршрутизатор также приводил к тому, что некоторые из моих образов не загружались, возможно, из-за неправильного пути, и эта проблема также была исправлена ​​с этим.