How to handle the navigation for the Button click in ReactJS?

Question

I am implementing a new app. Currently, I am able to do the navigation for the Link and couldn't do it for the button click navigation. I have checked this post and tried with BrowserHistory option. But this method is currently not supported.

Code:

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;

navigation is working fine for the contact and Home. But couldn't achieve the navigation for the Enquiry. How can I achieve this button navigation?

Is your MainStack wrapped in BrowserRouter or not?

devserkan
– devserkan

2018-06-14 07:20:50 +00:00
Commented Jun 14, 2018 at 7:20 — devserkan
– devserkan, Commented Jun 14, 2018 at 7:20
yeah. MainStack is wrapped with BrowserRouter .

Subburaj
– Subburaj

2018-06-14 07:25:38 +00:00
Commented Jun 14, 2018 at 7:25 — Subburaj
– Subburaj, Commented Jun 14, 2018 at 7:25

Maheshvirus · Accepted Answer · 2020-04-29 04:48:38Z

7

Using useHistory() from 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;

answered Apr 29, 2020 at 4:48

Maheshvirus

7,6412 gold badges45 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

devserkan · Accepted Answer · 2018-06-14 07:30:21Z

4

If your MainStack is wrapped in BrowserRouter you can use history like this:

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

And for the button:

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

answered Jun 14, 2018 at 7:30

devserkan

17.7k4 gold badges34 silver badges48 bronze badges

4 Comments

Subburaj Over a year ago

I am getting an error as "Cannot read property 'push' of undefined"

devserkan Over a year ago

What do you see when you console.log(this.props)? By the way, a simple working example: codesandbox.io/s/5mv52vy374

Subburaj Over a year ago

Now I have changed my index.js file as per your example and it is working fine for me.

Ranindu Over a year ago

LINK IS NOT WORKING, PLEASE TELL ME HOW TO FIX THIS "cannot read property 'push' ERROR?

Subburaj · Accepted Answer · 2018-06-14 08:56:36Z

2

Correct way to navigate using context in react-router v4:

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

The new react-router v4 has changed the location of the push method when accessing this.context.router. router now has history and route as properties and it is within history that you will find the allocated method.

Also, if you are using the latest react version 15.5.0, propTypes have been removed into a separate package and you can get them with:

npm install prop-types --save

or

yarn add prop-types

Change the code like below

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

Additionally, contextTypes needs to be declared as below

  static contextTypes = {
    router: PropTypes.object
  }

edited Jun 14, 2018 at 8:56

Subburaj

2,3543 gold badges23 silver badges40 bronze badges

answered Jun 14, 2018 at 7:00

Prabhu

1,0577 silver badges13 bronze badges

6 Comments

Subburaj Over a year ago

I am getting an error as "Cannot read property 'history' of undefined". Which library needs to be imported?

Prabhu Over a year ago

can you install prop-types ?

Subburaj Over a year ago

I have already installed the prop-types. Now the navigation is working fine after importing (import PropTypes from "prop-types";) and declaring the contextTypes.

Subburaj Over a year ago

Thanks prabhu!!! Now it is working fine for me with contextTypes declaration. I have updated the answer with contextTypes declaration

Prabhu Over a year ago

@Subburaj Yes it's correct i forget to add contextTypes declaration thanks for your update

|

DINA TAKLIT · Accepted Answer · 2022-07-10 17:49:25Z

2

In react-router-dom v6 useHistory() function is replaced by useNavigate(). So using useHistory will lead you to this error:

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

So just replace useHistory with useNavigate ex:

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

See more detail in this Attempted import error: 'useHistory' is not exported from 'react-router-dom' question

answered Jul 10, 2022 at 17:49

DINA TAKLIT

8,50410 gold badges84 silver badges92 bronze badges

Comments

Manoz · Accepted Answer · 2018-06-14 07:26:18Z

-1

You will need to import from react-router in order to get browserHistory work

import {browserHistory} from 'react-router';

Should work now

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

answered Jun 14, 2018 at 7:26

Manoz

6,62713 gold badges72 silver badges117 bronze badges

Collectives™ on Stack Overflow

How to handle the navigation for the Button click in ReactJS?

5 Answers 5

Comments

4 Comments

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

4 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related