How to navigate through routing on button click in react. react-router": "^6.2.1

Question

How to navigate through routing on button click in react.

I am trying to acess some other class using routing ( "react-router": "^6.2.1",) in reactJS. When I am clicking I am getting this error.

Cannot read properties of undefined (reading 'push')

Here is my class

import React, { Component } from "react";
import { withRouter } from 'react-router-dom';  
import { useHistory } from "react-router-dom"; 
import Button from "@mui/material/Button";

class MyBar extends Component {
constructor(props) {
    super(props);

        this.state = {};
        this.createNew = this.createNew.bind(this);
}

createNew () {
   this.props.history.push('/new');
}

render() {
    return (
      <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                 <div class="d-grid gap-2 col-2 mx-auto">
                    <button type="create" class="btn btn-outline-primary"  onClick={this.createNew}> Create Post </button>
                  </div>
            </div>
        </nav>
      </div>
    );
  }
}
export default MyBar;

Here is my dependency

"dependencies": {
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@mui/material": "^5.4.3",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.26.0",
    "bootstrap": "^5.1.3",
    "draft-js": "^0.11.7",
    "font-awesome": "^4.7.0",
    "react": "^17.0.2",
    "react-bootstrap": "^2.1.2",
    "react-dom": "^17.0.2",
    "react-draft-wysiwyg": "^1.14.7",
    "react-icons": "^4.3.1",
    "react-pro-sidebar": "^0.7.1",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },

But in other version( "react-router-dom": "^5.2.0",) of app by using this in the export

export default withRouter(ListOfEmployee);

I was easily able to navigate.

Can anybody help me here.

PS: I know there are multiple answer but none of them are its working and not getting much from the git and offcial docs.

Hope this answer your question.. https://stackoverflow.com/questions/63786452/react-navigate-router-v6-invalid-hook-call — Manfre, Mar 19 '22 at 17:38
As mentioned, see the answer linked above. Your best option is to refactor to a functional component, or use the trick mentioned in the answer. — Ari Seyhun, Mar 19 '22 at 17:49
@AriSeyhun I am not sure, I am trying to implement this in my system. Checking how to put that logic my system — David, Mar 19 '22 at 17:54

score 1 · Answer 1 · answered Mar 19 '22 at 17:34

1

In v6 you can use useNavigate:

const navigate = useNavigate()
navigate('/new')

answered Mar 19 '22 at 17:34

Yasin Br

1,675
1
6
16

React Hook "useNavigate" cannot be called in a class component. this is error I am getting when i am adding this in click handler method. – David Mar 19 '22 at 17:35
@David It's recommended to refactor your components. However, the alternative you can find [here](https://stackoverflow.com/questions/63786452/react-navigate-router-v6-invalid-hook-call) – Yasin Br Mar 19 '22 at 17:39

score 0 · Answer 2 · answered Mar 19 '22 at 17:44

0

It should work

class Login extends Component {
    nextPath(path) {
    this.props.history.push(path);
  }
    render() {
        return (
        <div>
        <button type='button' onClick={() => this.nextPath('/yourpath') } >Button</button>
        </div>
        );
}

answered Mar 19 '22 at 17:44

Arnav Singh

194
2
4

if you notice I am doing exactly the same thing. – David Mar 19 '22 at 17:47

How to navigate through routing on button click in react. react-router": "^6.2.1

2 Answers2