反应路由器 link 不工作

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 有效，但 link 无效。有什么建议吗？

Answer 1

Link 是一个 ui 元素，你必须在 render 方法中渲染它，并且 link 的 onClick 将带你到那个页面，把 Link 放在里面方法不会将您重定向到该页面。

你有两个选择：

1- 把 Link 放在你定义 handle click 的 render 方法中，意思是这样的：

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

并删除 handleClick 方法。

2- 另一种方法是，通过将路线推入历史记录来动态导航，如下所示：

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

有关详细信息，请查看此答案：

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

反应路由器 link 不工作

react router link is not working reactjs

reactjs

react-router-dom