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

Question

我正在实施一个新的应用程序。目前，我可以对链接进行导航，但无法对按钮单击导航进行导航。我已经检查了this post并尝试使用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;

联系人和主页的导航工作正常。但无法实现查询的导航。我怎样才能实现这个按钮导航？

Answer 1

使用

useHistory()

 中的 

react-router-dom

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;

Answer 2

如果您的 MainStack 包含在 BrowserRouter 中，您可以使用如下历史记录：

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.

Answer 3

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

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

新的react-router v4改变了访问this.context.router时push方法的位置。路由器现在将历史记录和路由作为属性，并且您将在历史记录中找到分配的方法。

此外，如果您使用的是最新的 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
  }

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'导出问题

Answer 5

您需要从

react-router

导入才能获得

browserHistory

工作

import {browserHistory} from 'react-router';

现在应该可以工作了

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