如何在Link:ReactJS上使用onClick事件？

Question

在React router中，我必须单击和onClick属性，如下所示

<li key={i}><Link to="/about" onClick={() => props.selectName(name)}>{name}</Link></li>

state = {
    selectedName: ''
};

selectName = (name) => {
   setTimeout(function(){this.setState({selectedName:name});}.bind(this),1000);
   // this.setState({selectedName: name});
}

• 属性导航到关于路线

当我给超时内嵌函数调用点击，其导航到新页面，并在某个时候状态得到更新，导致显示以前的名称，直到状态更新为新名称。

是否有一种方法，只有在onClick函数中的代码执行之后，它才会导航到新路由。

您可以[在这里]获取整个代码(https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js)

Answer 1

或者，我建议使用URL参数来捕获about页面所涉及的人的姓名。因此，url不是/about，名称不是幕后的，而是/about/tom或/about/pushkal。执行此操作的方法是在URL路由器中定义参数，例如在index.js中：

<Route path="/about/:name" component={AboutPage}>

现在，当您链接到“关于”页面时，您可以这样做：

<Link to={"/about/" + name}>{name}</Link>

现在，在AboutPage组件中，您可以在this.props.params.name中作为prop访问name参数。你可以在这里看更多的例子。

这种方法与您当前的方法有点不同，但我怀疑它以后会导致更容易的设计

Answer 2

一种可能的方法是，不要使用Link，而是使用history.push来动态更改路由。要实现这一点，请删除Link组件，并在li上定义onClark事件。现在，首先执行所有任务内on点击函数，并在最后使用history.push更改路线意味着在其他页面上导航。

在您的情况下，更改setState回调函数中的路由器，以确保它仅在状态更改后发生。

这样写：

<li key={i} onClick={() => props.selectName(name)}> {name} </li>

selectName = (name) => {
    this.setState({ selectedName:name }, () => {
        this.props.history.push('about');
    });
}

检查以下答案：

何时使用setState回调

如何使用react路由器dom进行动态导航