关于typescript:React路由跳转弹出新窗口传参

57次阅读

共计 1359 个字符,预计需要花费 4 分钟才能阅读完成。

业务中呈现了几个场景:有几个公共的页面须要展现固定的业务,须要在新路由中展现;起初需要改变,要求在新窗口中展现业务。

这样带来几个问题:
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

正文完
 0