Can not read history in class component

Question

I am trying to navigate to other page by using button click but it is throwing error by sayng that can not read property push of undefined.

I have did some research on history which is used forfunctional component.

How i can make use of history in class component or what is other way (react way) to navigate other page.

here is my code.

import React, { Component } from 'react';
class CentralBar extends Component {
    constructor(props){
        super(props)
        this.state = {
            
        }
        this.someText = this.someText.bind(this);
        
    }

    someText(){
        this.props.history.push(`/login/`);
    }

    render() {
        return (
            <div className="crentralPanel">
                
                <button type="button" class="btn btn-light  " onClick={this.someText}>Click on Text</button>
            </div>
        );
    }
}

export default CentralBar;

Does this answer your question? [Constructor props equivalent in React Hooks for history push](https://stackoverflow.com/questions/58122219/constructor-props-equivalent-in-react-hooks-for-history-push) — blazej, Jun 18 '21 at 21:06

Brian Thompson · Accepted Answer · 2021-06-18T21:23:20.787

history can be used in a class component. You just get access to it in a different way than in a function component.

In a function component, you would typically use the useHistory hook. But since hooks are exclusive to function components, you have to use a different method in a class.

Probably the simplest way is to use the withRouter higher order component. The only change you need to make is adding the import at the top, and wrapping the export.

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

export default withRouter(CentralBar);

This wrapper injects 3 props into the component: history, match, and location.

Note that the same rules apply to the HOC as do the useHistory hook since it's just another way of reading from the react-router context: the component must be a child of a Router provider component.

THank you @brain for indepth answer. From my next project onward i will kepp function componnet. — David, Jun 19 '21 at 06:44

score 1 · Answer 2 · answered Jun 18 '21 at 21:17

Please wrap your class component with withRouter.

import { withRouter} from 'react-router-dom';
export default withRouter(CentralBar);

If you didn't install react-router-dom module, please run this command to install this node module.

Please let me know if it works or not.

blazej · Answer 3 · 2021-06-18T21:07:20.893

0

You can't use hooks in class components. You can find many solution in the Internet how to get it around, but I don't think it is worth it. If you really need use hooks in this component, make it with Functional Component. Class components should be used in react in small amount of cases. You can read about it here: React functional components vs classical components

edited Jun 18 '21 at 21:07

answered Jun 18 '21 at 21:02

blazej

927
4
11
21

*so there's no other way* this isn't true.. `react-router` has been around way longer than hooks have.. – Brian Thompson Jun 18 '21 at 21:04
Ok, I agree, but still, I don't think class compoent should be used in this case – blazej Jun 18 '21 at 21:05
That's a matter of opinion, and does not answer the OP's question. – Brian Thompson Jun 18 '21 at 21:07
1

It kind of is, but it is kind of good practices rules as well. Class components should be used in edge cases. – blazej Jun 18 '21 at 21:10
My main point is when the question is "How i can make use of history in class component" I don't think "make it a functional component" is a legitimate answer.. – Brian Thompson Jun 18 '21 at 21:16
Ok, agree, but answers can make asker to consider other solution as well – blazej Jun 18 '21 at 21:18
I'm sorry but I'd still have to disagree. That's what comments are for. The code in the question is appears to be a simplified example. For all we know, they could have a very legitimate reason for wanting to keep it a class component. If we want to verify that, you're welcome to leave a comment asking if converting to a function component is an option. But I don't believe that it belongs as an answer. – Brian Thompson Jun 18 '21 at 21:21
@BrianThompson I am using class componnet, which i am practicing from internet. I design UI and when I strated writing controller for button i am facing this issue. This suppose to be simple work around because changing all the classes of my project to the functional component will too much work. – David Jun 19 '21 at 05:48

Can not read history in class component

3 Answers3