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

Question

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

在学习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的值。

Answer 1

react-router-dom基本使用+3种传参方式 - smile_or - 博客园 //App.js import { BrowserRouter as Router, Route, Link, } from "react-router-dom"; // 引入组件 https://www.cnblogs.com/sgs123/p/14077680.html