react react-router中如何应对this.props.history.goBack() 返回两次或多次才生效的问题（2019-12-25）

[yaogengzhu]

react react-router中如何应对this.props.history.goBack() 返回两次或多次才生效的问题

最近在react项目中，封住了一个返回的组件。 采用this.props.history.goBack() 。返回上一级，但是由于这个页面有跳转编辑信息的页面，然后返回，点击返回按钮，点击两次才能返回到上一级。

解决方案：

import React from 'react'
import './nav-title.scss'
import { Iconfont } from '@/components/icon-font/icon-font'
import { RouteComponentProps, withRouter } from 'react-router-dom'

interface IProps extends RouteComponentProps  {
    title: string
    render?: () => React.ReactNode
    goBack?: () => void
    isBack?: boolean
}
class NavTitleComp extends React.Component<IProps , {}> {
    constructor(props: IProps) {
        super(props)
        this.state = {}
    }

    public  render() {
        return(
            <div className='nav-title'>
                <div className="navTitle-left" onClick={() => { this.back()}}>
                    <Iconfont name='iconfanhui1' size='26'></Iconfont>
                </div>
                <div className="navTitle-center">
                    { this.props.title || '标题文字' }
                </div>
                <div className="navTitle-right">
                    { this.props.render && this.props.render() }
                </div>
            </div>
        )
    }

    private back() {
        // window.history.back()
        console.log(this.props.isBack)
        if (this.props.isBack) {
            return this.props.goBack && this.props.goBack()
        }
        this.props.history.goBack()
    }
}


export default withRouter(NavTitleComp)