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

前端之家收集整理的这篇文章主要介绍了React-router在混合应用开发中的注意事项。前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

最近有一些朋友,使用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,到此问题解决

猜你在找的React相关文章