反应路由器链接不工作reactjs

Question

我试图在按钮中使用react-router导航。

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元素，你必须在渲染方法中渲染它，并且onClick的那个链接会带你到那个页面，把一个方法放在一个方法中就不会把你重定向到那个页面。

您有两种选择：

1-将链接放在渲染方法中定义句柄单击的位置，意思是这样的：

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

并删除handleClick方法。

2-另一种方法是，通过将路径推送到历史记录中动态导航，如下所示：

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

有关更多详细信息，请查看以下答案：How to navigate dynamically using react router dom

假设你正在使用React-Router V4.