React: 跳转页面+刷新(登陆成功后的动作)

该博客介绍了如何在React项目中结合create-react-app、React Router和Ant Design创建登录注册功能,并利用react-router-redux的push和go方法实现登录成功后的页面跳转及刷新。通过创建history.js文件导入createBrowserHistory,然后在登录组件中导入并使用history进行页面切换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:

1. 创建react项目icon-default.png?t=M5H6https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#create-react-app

2. 建立react 路由icon-default.png?t=M5H6https://reactrouter.com/docs/en/v6/getting-started/overview

3. 使用ant designicon-default.png?t=M5H6https://ant.design/components/overview-cn/

在写完登录注册之后,需要跳转到主页面

使用 react-router-redux 中的 push 进行页面跳转加刷新页面:

  • push - 跳转到指定路径
  • replace - 替换历史记录中的当前位置
  • go - 在历史记录中向后或向前移动相对数量的位置
  • goForward - 向前移动一个位置。相当于go(1)
  • goBack - 向后移动一个位置。相当于go(-1)

一:在自定义路由的文件夹下新建一个history.js

import { createBrowserHistory } from 'history'
 
export default createBrowserHistory();

在登录的js文件里设置:


import history from "history.js的路径";

// 使用history进行跳转


history.replace({ pathname: "目标路由路径", state: {} });
history.go(0);

 相关资源:react怎么实现页面组件跳转

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值