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

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

this.context.router.history.push（＆＃39; / EnquiryResult＆＃39）

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

此外，如果您使用的是最新的反应版本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 3

如果您的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 4

您需要从react-router导入才能获得browserHistory工作

import {browserHistory} from 'react-router';

现在应该工作

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

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

4 个答案: