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元素，你必须在render方法中渲染它，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.

反应路由器链接不工作reactjs

1 个答案: