React-router 在项目开发中遇到的一个坑,使我最终放弃使用react

#1

Activities 组件 路由是/app_welfare.php

点击“马上抢”按钮时跳转到 Detail 组件

Detail 组件 路由是/app_welfare.php/detail/1

坑来了噢,,,
在Detail 组件页是要进行微信分享的,于是我在Detail 组件的 compentDidUpdate 方法中,调用 Tools 组件的分享方法

分享组件实现

url 参数是参与签名的,只要是传递当前浏览器地址栏中的地址,微信都会认为是签名成功。
在andrio 机的微信里一切正常

但在苹果机上 签名是失败的,只有刷新当前页面签名才会成功。

alert(window.location.href);

弹出 http://XXX/app_welfare.php/detail/1 服务端打印日志 url 也同上

复制当前页面地址,惊奇的发现却为:http://XXX/app_welfare.php,难怪微信会认为签名是失败的!

刷新页面然后复制当前页面地址,文本为:http://XXX/app_welfare.php/detail/1 签名成功!

蛋蛋疼了又疼,实在不知道如何解决!最终项目重构回 jquery 。

#2

没看明白, 是 iOS 当中 History API 存在问题吗?

#3

在调用 Navacation.translationTo(’’) 实现react router 的路由转向时,苹果的微信浏览器复制出的地址是上一页的地址,这样就会导致签名失败

#4

这个比较可能的是,采用transitionTo方法,会先调用路由渲染组件之后再改变浏览器地址。尝试用location.href替代transitionTo应该可以解决。

1 Like
#5

我是在 Detail 组件的 compentDidUpdate 里调用才 wx.config() 的,按理说浏览器地址早已被修改了,我做了个延迟也没用,window.location.href 是有用的,但页面动作比较大,也就失去了用 react 实现 native app 效果的意义。

#6

我只想说react是无辜的

1 Like
#7

react跟使用什么路由方式并没有管理,react-router不好用,换个不就好了,page.js direactor之类的太多了。

#8

嗯,你说的对,我试试别的。

#9

在每次 url 变化的时候,比如分享页面的 componentDidMount 里面进行一次微信 JSSDK 的配置蛤

#10

我也觉得react-router把问题复杂化了

#11

现在就是这么做的,主要原因应该是苹果机下当前页的地址(可手动复制出来),和window.location.href 不一致,所以造成了签名失败,各种方法都试了,应该是微信浏览器在苹果下的 bug,没有对 pushState 做很好的处理。

#12

我感觉在前端的主要作用是,可以很好的使用后退操作按钮,因为要保留历史数据,光用 react 自己实现,SPA 或 处理 pushState 会比较吃力。

#13

还要以很好的组织你的项目,看路由基本就一目了然了

#14

这种问题在所有spa都会存在。我目前是加了判断,如果跳转的页面需要调用微信接口,在跳转前直接调用document.location.href=xxx。

#15

微信浏览器的问题,微信说6.3之后会支持pushstate,之前版本的微信怎么办呢?如何绕过这个问题?

#16

亲测在android 6.3.15版本不支持所谓的pushstate。目前用的方法是在生成jsConfig时url为 xxxx.xxxx.com/ 即可。
举个例子:安全域为http://9dhtloybxo.proxy.qqbrowser.cc/, 页面从 / 跳转到 /deploy(transitionTo方式)。

/deploy申请的jsConfig的url应该为http://9dhtloybxo.proxy.qqbrowser.cc/,而不是http://9dhtloybxo.proxy.qqbrowser.cc/deploy

原因在于transitionTo跳转只是在浏览器href中显示的是/deploy,实际上浏览器内部获取到的地址还是在/上。这就是为什么会出现签名失败。

#17

实在不行你可以试试,去掉 React-router, 后端做路由。。。

#18

/app_welfare.php/detail/1 这里是不是错了?不应该是/1,应该是 /:1

#19

我用 react 和 react-router 貌似没什么问题,android 和 ios 都正常,你可以扫描下面的二维码测试

#20

既然 href 获取的是你的根目录,我觉得你可以获取history 的path 属性。。 href+path 作为分享的路径 应该是可以的