反應路由器鏈接不起作用reactjs

Question

我試圖在按鈕中使用反應路由器導航。

dashboard.js

handleClick() {
   <Link to="/deneme">Deneme</Link>;
   console.log('clicked!');
}

<Button color="primary" onClick={this.handleClick}>Hesapla</Button>

我將路線配置為：

index.js

<HashRouter>
  <Switch>
    <Route path="/" name="Home" component={Full}/>
  </Switch>
</HashRouter>

Full.js

<Switch>
    <Route path="/dashboard" name="Dashboard" component={Dashboard} />
    <Route path="/deneme" name="Deneme" component={Deneme} />
</Switch>

handleClick有效，但鏈接無效。 有什么建議嗎？

Answer 1

Link是一個ui元素，您必須在render方法中進行渲染，而該鏈接的onClick會將您帶到該頁面，將Link放在一個方法中不會將您重定向到該頁面。

您有兩種選擇：

1-將那個鏈接放到您定義手柄點擊的渲染方法中，意思是這樣的：

<Button color="primary">
    <Link to='/deneme'>Hesapla</Link>
</Button>

並刪除handleClick方法。

2-另一種方法是通過將路線推入歷史記錄來動態導航，如下所示：

handleClick() {
   this.props.history.push('/deneme');
}

有關更多詳細信息，請檢查以下答案： 如何使用react router dom動態導航

假設您正在使用React-Router V4.