Question

我正在学习路由器@ v4的反应，并在运行我的代码时遇到了意外情况。它如下：

我在下面写了一行来导航到另一个组件：

<NavLink to="/data">Dummy Data</NavLink>
<Route path="/data" component={DataStore} history={history} />

在它的历史中，{}是一个const变量，引用了React的createBrowserHistory（）。在DataStore页面上，我用onclick函数编写了一个按钮代码，如下所示：

<button onClick={this.props.history.push("/")}>Back</button>

当我单击主页面上的虚拟数据链接时，控件会重定向到DataStore组件而不进行任何操作，它会在完成页面加载操作后返回主页面。表示在页面加载本身时执行为onClick函数指定的代码，而不单击按钮。为了克服这个问题，我在DataStore组件中编写了不同的函数，我在按钮点击时调用了它，并在其中写了“this.props.history.push（'/'）”。然后我再次运行我的代码，它工作正常。

任何人都可以指导我在页面加载时反应历史记录功能的上述异常行为。非常感谢有帮助的回应。

Answer 1

<button onClick={this.props.history.push("/")}>Back</button>

将立即执行

<button onClick={()=>this.props.history.push("/")}>Back</button>

将在点击

时执行

反应路由器的历史道具在页面加载时自行执行

1 个答案: