React-router在混合应用开发中的注意事项。

Posted 2022-11-04 天外野草

前言

最近有一些朋友，使用react+cordova进行打包，但是使用过程中遇到很多问题，比如初始页面无法加载的问题，这里写个博客分享一个：

路由

react项目中，我们最经常使用的路由控制时react-router（3.x）,当然现在有最新版本我们不做讨论。

传统的使用如下：

import  Router, browserHistory  from 'react-router';

const bootstrap = () => 
  const store = configureStore();
  render(
    <Provider store=store>
      <Router history=browserHistory routes=getRoutes(store) />
    </Provider>,
    document.getElementById('root')
  );
;

bootstrap();

上面我们看到我们使用browserHistory初始化路由，开发测试过程中，浏览器端（运行在server上）正常运行，没有任何问题，可以抛开服务，在client端运行，比如cordova打包，就是无法显示初始页面，也没有任何错误。

对此我们需要替换 browserHistory 为hashHistory.

代码如下：

import  browserHistory, hashHistory  from 'react-router';

export default function getHistoryRouter() 
  if (window.cordova) 
    return hashHistory;
  
  return browserHistory;

以上代码我们区分了在服务端与客户端使用不同的history, 到此问题解决。