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

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.

CodePudding user response：

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);

CodePudding user response：

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

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

CodePudding user response：

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);

CodePudding user response：

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?