React中向路由组件state传参,history.action异常,如何解决?

问题遇到的现象和发生背景

在学习React编程式路由导航的时候,编写一个小案例。
这个案例实现的是,多级路由,动态实现新闻列表,点击新闻之后显示,新闻内容。

以下是新闻列表组件渲染的代码

render() {
    const {messageArr} = this.state
    return (
        <div>
            <ul>
                {
                    messageArr.map((obj) => {
                        return (<li key={obj.id}>
            
                            {/*向路由组件传递state参数*/}
                            <Link to={{pathname:'/home/message/detail',state:{detailObj: obj}}}>{obj.title}</Link>
                            &nbsp;<button onClick={()=>this.goto(obj,false)}>push</button>
                            &nbsp;<button onClick={()=>this.goto(obj,false)}>replace</button>
                        </li>)
                    })
                }
            </ul>
            <Route path='/home/message/detail' component={Detail}></Route>
            &nbsp;<button onClick={this.goback}>back</button>
            &nbsp;<button onClick={this.goForward}>forward</button>
        </div>
    );
}


遇到的问题是:
用params的形式传参,无论点击多少次新闻,在Detail组件中获得this.props.history.action为push。
但是用了state的形式传参,只有第一次点击的某一条新闻,this.props.history.action为push,之后点击的新闻,history的action为replace。Link中replace默认值为false,即使设定为显示设定,也是不起作用。

在Link组件后面,增加Button分别调用this.props.history.replace、this.props.history.push来实现跳转。
结果是和params的形式传参一样,在Detail组件中可以正确输出this.props.history.action的值

我用的react版本为17.0.2
react-router-dom版本为5.3.0。
请问,该如何处理才能在state的形式传参时,多次点击Link后都可以得到正确的this.props.history.action的值。