Question

在React路由器中，我有到和 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 将值分配给状态变量selectedName，该值将在导航到“关于”页面时显示。

当我给出超时内部函数调用时，单击它，导航到新页面，并在某个时间状态更新后导致显示以前的名称，直到状态更新为新名称。

有没有办法只有在onClick函数中的代码执行后才会导航到新路由。

您可以[在此处]获取整个代码。（https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js）

Answer 1

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

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

像这样写：

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

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

检查以下答案：

When to use setState callback

How to navigate dynamically using react router dom

Answer 2

或者，我建议使用URL Params来捕获about页面所关注的人的姓名。因此，代替url是/ about并且名称在幕后，它将是/ about / tom或/ about / pushkal。你这样做的方法是在你的index.js中定义URL路由器中的params：

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

现在，当您链接到about页面时，您可以这样做：

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

现在，在您的AboutPage组件中，您可以在this.props.params.name中访问名称参数作为道具。您可以查看更多示例http://en.cppreference.com/w/cpp/language/unqualified_lookup#Injected_class_name。

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

Answer 3

只需将Link的内容包装在div内，并为该div提供onClick侦听器，它将可以正常工作。例如：

<Link to="/about">
 <div onClick={() => {yourfunction()}>About</div>
</Link>

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

3 个答案: