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

Question

在React Router中，我必須具有to和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分配值，該值將在導航到“關於”頁面時顯示。

當我給出超時內部調用函數click時，它導航到新頁面，並在一段時間后狀態得到更新，導致顯示以前的名稱，直到狀態被新名稱更新為止。

只有在執行onClick函數中的代碼后，才可以導航到新路線。

您可以在此處獲得完整的代碼。（ https://github.com/pushkalb123/basic-react-router/blob/master/src/App.js ）

Answer 1

一種可能的方法是，不使用Link ，而是使用history.push動態更改路由。 為此，請刪除Link組件並在li上定義onClick事件。 現在，首先執行onClick函數中的所有任務，最后使用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 Router Dom動態導航

Answer 2

另外，我建議使用URL參數來捕獲“關於”頁面所涉及的人員的姓名。 因此，不是url是/ about，而是名稱在幕后，而是/ about / tom或/ about / pushkal。 為此，您需要在index.js中定義URL路由器中的參數：

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

現在，當您鏈接到“關於”頁面時，您將像這樣進行操作：

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

現在，在AboutPage組件，您可以訪問的名稱PARAM作為道具this.props.params.name 。 您可以在此處查看更多示例。

該方法與您當前的方法有些不同，但是我懷疑它將在以后使設計更容易

Answer 3

只需將Link的內容包裝在div內，並將onClick偵聽器分配給該div，即可正常工作。 例如：

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