React路由跳转,弹出新窗口,传参

时间:2020-9-11 作者:admin

业务中出现了几个场景:有几个公共的页面需要展示固定的业务,需要在新路由中展示;后来需求改动,要求在新窗口中展示业务。

这样带来几个问题:
1,路由跳转
2,新窗口弹出
3,弹出窗口传参用来请求接口数据,如何传递参数

项目使用hooks开发
首先需要注册路由
<Router path={'路径'} exact={true} component={MyComponent}>
这里面的exact属性默认为false,如果为true时,需要和路由相同时才能匹配,有斜杠也是可以匹配。
如果在父路由中加了exact,不能匹配子路由,建议在子路由中加exact

在实现的过程中,因为习惯问题,我把这一行代码放在<Switch>中较为靠后的位置,把自己坑了一把,后来查了下,这件事情和路由的匹配规则有关系。
1,从上到下匹配, 一旦匹配到了, 就不往下匹配了。错误页面的配置, 就是上面都无法匹配到, 就匹配错误页面。
因为开启了严格匹配,为了养成良好的习惯
2. 长路由放在短路由前面,这里是说,路由前半部分相同的情况 `/a/b` 应该放在 `/a` 前面
3. 长路由放在模糊匹配的前面 `/a/b` 放在 `/a/:id

匹配好路由后就可以直接在代码里面实现跳转了。
首先组件里面要引入react-router-dom
要使用props.history.phush()方法还需要用withRouter

import {withRouter} from 'react-router-dom'
...
props.history.push({pathname:'your router',state:{your parameter}})
...
export default withRouter(memo(MyComponent));

跳转路由的参数就从props.history.location.state中获取

如果需要出现新窗口,路由跳转不适用,需要使用window.open()函数跳转新窗口。这里的Url拼接和新窗口参数获取涉及到location,浏览器F12输入location能看到具体结构。

location属性
hash设置或返回从井号 (#) 开始的 URL(锚)。如果地址里没有“#”,则返回空字符串。
host设置或返回主机名和当前 URL 的端口号。
hostname设置或返回当前 URL 的主机名。
href设置或返回完整的 URL。在浏览器的地址栏上怎么显示它就怎么返回。
pathname设置或返回当前 URL 的路径部分。
port设置或返回当前 URL 的端口号,设置或返回当前 URL 的端口号。
protocol设置或返回当前 URL 的协议,取值为 ‘http:’,’https:’,’file:’ 等等。
search设置或返回从问号 (?) 开始的 URL(查询部分)。

location方法
assign()加载新的文档。
reload()重新加载当前文档,相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace()用新的文档替换当前文档,相当于按浏览器上的“刷新”(IE)或“Reload”键。

例子如下

window.opne(location.origin+'your router? parameter & other parmeter');
// 新窗口获取传入参数
location.search
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。