如何在ReactJS中处理按钮点击的导航？

Question

我正在开发一个新的应用程序。目前，我可以为链接进行导航，但无法为按钮点击导航。我已经查看了此帖子并尝试使用BrowserHistory选项。但是，该方法目前不受支持。

代码：

import React, { Component } from "react";
import {Route,Router,NavLink,HashRouter,BrowserRouter} from "react-router-dom";
import Contact from "./components/Contact";
import Home from "./components/Home";
import EnquiryResult from "./components/EnquiryResult";
import logo from './logo.svg';
import './App.css';

class MainStack extends Component {

  onClick(){
   // browserHistory.push("/EnquiryResult");
}

  render() {
    return (
        <div>
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <div>
          <button className="btn" onClick={this.onClick.bind(this)}>Enquiry</button >
          </div>

          <ul className="header">
            <li><NavLink  to="/contact">Contact</NavLink ></li>
            <li><NavLink  to="/Home">Home</NavLink ></li>
          </ul>

          <div>
            <Route path="/Home" component={Home}/>
            <Route path="/contact" component={Contact}/>
            <Route path="/EnquiryResult" component={EnquiryResult}/>

        </div>
        </div>
    );
  }
}

export default MainStack;

联系我们和主页的导航正常工作。但是无法实现查询导航。我该如何实现此按钮导航？

- Subburaj

---

你的MainStack是否包裹在BrowserRouter中？ - devserkan

是的。MainStack 用 BrowserRouter 包装了起来。 - Subburaj

Answer 1

使用 react-router-dom 中的 useHistory()

import React from 'react';
import { useHistory } from "react-router-dom";
function NavigationDemo() {
  const history = useHistory();
  const navigateTo = () => history.push('/componentURL');//eg.history.push('/login');

  return (
   <div>
   <button onClick={navigateTo} type="button" />
   </div>
  );
}
export default NavigationDemo;

- Maheshvirus

Answer 2

如果您的MainStack被包装在BrowserRouter中，您可以像这样使用history：

onClick = () => this.props.history.push("/EnquiryResult");

而对于按钮：

<button className="btn" onClick={this.onClick}>Enquiry</button>
// No need to bind since we are using arrow function for our onClick.

- devserkan

---

我遇到了一个错误，提示为“无法读取未定义的属性'push'”。 - Subburaj

当你使用 console.log(this.props) 时，你会看到什么？顺便说一句，这是一个简单的工作示例：https://codesandbox.io/s/5mv52vy374 - devserkan

现在我已经按照你的示例更改了我的index.js文件，它对我来说运行良好。 - Subburaj

链接无法使用，请告诉我如何修复“无法读取属性'push'错误”？ - Ranindu

Answer 3

在react-router v4中正确使用上下文进行导航的方法：

this.context.router.history.push('/EnquiryResult')

新的react-router v4已经改变了访问this.context.router时push方法的位置。现在，router有history和route属性，而在history中你将找到分配的方法。

此外，如果你正在使用最新版本的React 15.5.0，则propTypes已被移动到一个单独的包中，你可以通过以下方式获取它们：

npm install prop-types --save

or

yarn add prop-types

请按照以下方式更改代码

onClick(){
   this.context.router.history.push('/EnquiryResult')
}

此外，需要按照以下方式声明contextTypes。

  static contextTypes = {
    router: PropTypes.object
  }

- Prabhu

---

我遇到了一个错误，提示为“无法读取未定义的属性'history'”。需要导入哪个库？ - Subburaj

你能安装prop-types吗？ - Prabhu

我已经安装了prop-types。现在，在导入（import PropTypes from "prop-types";）并声明contextTypes之后，导航正常工作。 - Subburaj

谢谢Prabhu！！！现在我已经通过contextTypes声明成功运行了。我已经更新了答案并加入了contextTypes声明。 - Subburaj

@Subburaj 是的，我忘记添加 contextTypes 声明了，感谢你的更新。 - Prabhu

好的回答，只需添加文档链接，始终将参考链接起来，使其更加完美！ - Marco

Answer 4

在 react-router-dom v6 中，useHistory() 函数被 useNavigate() 替换。因此，使用 useHistory 会导致出现以下错误：

Attempted import error: 'useHistory' is not exported from 'react-router-dom'

只需将 useHistory 替换为 useNavigate，例如：

import { useNavigate } from 'react-router-dom'
export default function QuestionAnswer() {
    const navigate = useNavigate()
    return (
          <Button
                onClick={() => {
                  navigate(`/something`)
                }}
              >
                Click Me
          </Button>
    )
}

请查看此问题以获取更多细节：尝试导入错误：'useHistory'未从'react-router-dom'中导出。

- DINA TAKLIT

Answer 5

您需要从react-router导入，才能让browserHistory正常工作。

import {browserHistory} from 'react-router';

现在应该可以工作了

 onClick(){
   browserHistory.push("/EnquiryResult");
 }

- Manoz