react 返回一个页面_react 返回上一页

import * as React from 'react'

import { Layout } from 'antd';

import creatHistory from 'history/createHashHistory' //返回上一页这段代码

const history = creatHistory();//返回上一页这段代码

import './index.less'

const { Header, Sider, Content } = Layout;

export interface IProps {

test?: any

history?:any

}

interface IState {

}

export default class ReachInfos extends React.Component {

constructor(props: IProps) {

super(props)

}

goBackPage = () => {

history.goBack(); //返回上一页这段代码

}

render(){

return (

视频详情

视频信息:
  • 拍摄时间:
  • 2018-10-11
  • 拍摄地址:
  • 雁塔区

{/* */}

Sider

)

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Hooks 中返回上一页并不会刷新上一页的页面,这是 react-router-dom 库的默认行为。如果你需要在返回上一页时刷新上一页的页面,可以通过以下几种方式实现: 1. 在返回上一页时手动刷新页面。可以使用 JavaScript 提供的 `location.reload()` 方法来刷新页面。具体来说,可以在需要返回上一页的事件处理函数中先调用 `history.goBack()` 方法,然后再调用 `location.reload()` 方法来刷新页面。 ```jsx import { useHistory } from 'react-router-dom'; function MyComponent() { const history = useHistory(); function handleGoBack() { history.goBack(); window.location.reload(); } return ( <div> <button onClick={handleGoBack}>返回上一页</button> </div> ); } ``` 2. 使用路由参数来判断是否需要刷新页面。可以在路由跳转时传递一个参数,然后在上一页的组件中监听该参数的变化,如果参数发生了变化,则手动刷新页面。具体来说,可以在需要返回上一页的组件中通过 `history.push()` 方法传递一个参数,然后在上一页的组件中通过 `useEffect()` 钩子函数监听该参数的变化,如果参数发生了变化,则调用 `location.reload()` 方法来刷新页面。 ```jsx import { useEffect } from 'react'; import { useHistory } from 'react-router-dom'; function PreviousComponent() { useEffect(() => { if (location.state && location.state.forceRefresh) { window.location.reload(); } }, []); return ( <div> <h1>上一页</h1> </div> ); } function MyComponent() { const history = useHistory(); function handleGoBack() { history.push({ pathname: '/previous-page', state: { forceRefresh: true } }); } return ( <div> <button onClick={handleGoBack}>返回上一页</button> </div> ); } ``` 需要注意的是,手动刷新页面可能会导致用户的操作数据丢失,因此需要谨慎使用。建议在需要刷新页面时给出提示并允许用户确认。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值