react-router

Posted 2021-01-30 alisadream

1、window.location当前页面地址信息

属性：

href url完整地址

hash 路由，#开始的部分

search 查询部分，?开始的url

host 主机名及端口号

hostname 主机名

pathname url路径部分

方法：

replace() 替换

reload() 重新加载

如：http://172.16.87.204:8900/?s=1#/invoiceLottery/lotteryRecord?ss=22

href: "http://172.16.87.204:8900/?s=1#/invoiceLottery/lotteryRecord?ss=22"
hash: "#/invoiceLottery/lotteryRecord?ss=22"
search: "?s=1"
host: "172.16.87.204:8900"
hostname: "172.16.87.204"
pathname: "/"

 

2、浏览器history（浏览器历史记录）

history.back(); // 返回上级 （history.go(-1)）
history.forward(); // 跳转到下个页面（history.go(1)）
history.go(); // 用于指定页跳转

 

3、react的history对象

 

history改造的浏览器history(单页面hash改变加载不同内容)

history.location // 当前页面所在位置
history.push({ pathname: ‘/new-place‘ }); // 路由跳转
history.replace({ pathname: ‘/new-place‘ }); // 路由跳转(覆盖式)
history.goBack(); // 返回上一个页面
history.goForward(); // 跳转下一个页面
history.go(); // 用于指定页跳转
history.listen(); // 监听地址变化，执行相关操作

 

4、react-router是建立在history对象之上

一个history知道如何去监听浏览器地址栏的变化，并解析这个URL转换为location对象，

然后router使用它匹配到路由，最后正确地渲染对应组件

 

5、dva中dva-router使用routerRedux跳转路由

routerRedux.push();
routerRedux.replace();
routerRedux.goBack(); // 返回上一级路由（会刷新页面）

// model里面使用
yield put(routerRedux.goBack());