React-router在混合应用开发中的注意事项。
发布时间:2020-12-15 06:36:19 所属栏目:百科 来源:网络整理
导读:前言 最近有一些朋友,使用react+cordova进行打包,但是使用过程中遇到很多问题,比如初始页面无法加载的问题,这里写个博客分享一个: 路由 react项目中,我们最经常使用的路由控制时react-router(3.x),当然现在有最新版本我们不做讨论。 传统的使用如下
前言最近有一些朋友,使用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,到此问题解决。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |