How to do routing in react by clicking a button in class component?

Question

I was having a button in a react class component as following

 <Link to="display">
    <button onClick={this.nextBtn} className="nextBtn">
        Submit
    </button>
 </Link>

By clicking the button, I need to route it to another component called <Display /> using the function nextBtn = () => {}.

I saw that in the function component it can be by useHistory but in the class component, I don't know how to do it.

you can do that on the body of this.nextBtn function, so remove Link wrapper and import Router and Router.push('/newRoute') — Adolfo Onrubia, Oct 27 '21 at 06:56
Why can't the `Link` component do its job and link to the path rendering the `Display` component? All the answers below don't ask this basic question, and assume the code in your snippet has access to the route props of the nearest router. Can you provide a more comprehensive and complete code example? — Drew Reese, Oct 27 '21 at 07:05

score 2 · Accepted Answer · answered Oct 27 '21 at 07:14

You can also use withRouter from import { withRouter } from "react-router"; and inject your component. You can get history as a props and use history.push() for navigate route.

Example:

import React from "react";
import { withRouter } from "react-router";

class ShowTheLocation extends React.Component {
  nextBtn = () => {
    const { history } = this.props;

    history.push("/display");
  };

  render() {
    return (
      <Link to="display">
        <button onClick={this.nextBtn} className="nextBtn">
          Submit
        </button>
      </Link>
    );
  }
}

export default withRouter(ShowTheLocation);

It shows "withRouter' (imported as 'withRouter') was not found in 'react-router".. Using react-router-dom v6.2.1 — Rahul Dasgupta, Jan 12 '22 at 19:37

score 0 · Answer 2 · answered Oct 27 '21 at 06:58

0

You can also try this. It's works for me

import { browserHistory } from 'react-router';
    class MyClass extends Component {
        nextBtn = () => {
           browserHistory.push('/display');
        }
    }

answered Oct 27 '21 at 06:58

Codder

25
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 27 '21 at 07:00

score 0 · Answer 3 · edited Oct 27 '21 at 07:43

You can route to another page using several methods. First, in your case, you are using a Link. But your route name passing is wrong. You have to pass the route name in front like this:

        <Link to={'/display'}> 
        // display should be a routes name
         <button className="nextBtn">
         Submit
         </button>
         </Link>

https://reactrouter.com/web/api/Link.

You can read more about it here:

Secocnd method:
Use react-router-dom package to define the routing and then use one of below mentioned ways on onClick event of button.

  1. this.props.history.push("componentpath").
  2. browserHistory object (in react-router package).

Also check this question solutions... how to navigate from one page to another in react js?

score 0 · Answer 4 · answered Oct 27 '21 at 07:16

I assume you`re using a library for routing like react-router.

You want to get access to the history object from react-router. React router offers so called higher order functions which have access to the history and inject it into your class-component. Then inside of your component your have access to it via this.props.history.

import { withRouter } from 'react-router-dom';

//JS-Example
class YourJSComponent extends Component {

 /**
 * Since the class gets exported wrapped in withrouter(YourComponent), history is now in the props.
 */

anyRedirectMethod = () => {
 this.props.history.push("/yourRoute")
}
 

 render(

   return(
    <Link to="display">
     <button onClick={this.anyRedirectMethod} className="nextBtn">
      Submit
     </button>
    </Link>
   )

 )
}

export default withRouter(YourJSComponent);

How to do routing in react by clicking a button in class component?

4 Answers4