Cordova - 路由在 React 应用程序中不起作用答案

【问题标题】：Cordova - routing not working in React ApplicationCordova - 路由在 React 应用程序中不起作用
【发布时间】：2019-04-22 10:02:12
【问题描述】：

我有一个现有的 React 应用程序，我正在尝试将其移植到 iOS 和 Android。

我设法在 iOS 上运行应用程序，只需将常规路由更改为哈希路由。

import { createBrowserHistory, createHashHistory } from 'history';
import { IS_HYBRID_APP, IS_PROD } from 'utils/environment';
export const history = window.cordova ? createHashHistory() : createBrowserHistory();
const connectRouterHistory = connectRouter(history);

这种方法在 Android 上不起作用。导航坏了。

有什么建议吗？

上下文：

我做的步骤是：

环境设置：

npm install -g cordova
已安装 Java 8（不支持 8 以上的版本）
已安装 Android Studio
将 JAVA_HOME、ANDROID_HOME 和 GRADLE_HOME 添加到我的 PATH — 将模拟器添加到路径中
安装了正确的 sdk 执行：sdkmanager “platform-tools” “platforms;android-27”
在 Android Studio 中添加了一个模拟器

应用准备和启动：

npm install
cordova platform add android
rm -rf www
react-app-rewired build
// vvv - injects the cordova script and the CSP meta tags into build/index.html
node config/hybrid-app-build.js
mv build www
cordova start android

在模拟器和真实设备上的结果相同。路由无法正常工作，而其他一切似乎都正常。

【问题讨论】：

您能否详细说明“导航已损坏”的行为？
导航好像还不错。没有立即意识到这一点，因为该应用程序由于缺少一些后端数据而损坏。我将把这个问题留在这里作为其他尝试使用 Cordova 设置 React 应用程序的人的参考。

标签： android reactjs cordova mobile hybrid-mobile-app

【解决方案1】：

如果您在项目中使用<Router>，请将其更改为<HashRouter>，否则您将看到空白显示，因为屏幕上不会呈现任何内容。适用于 iOS 和 Android。

来源：

https://stackoverflow.com/a/46785362/3850405

【讨论】：