Cannot read property 'pushState' of undefined

Question

I have this simple configuration for the React Router. I have another one with basically wrapping with ... , which works. But this one doesn't (of course I tried to use with different implementations like suggested in the answers of this post and many others.

The console error is the title of this post. Using ES6, and react-router v.1 with hash-based routing.

I read a lot of articles, too unnecessary for simple routing to be implemented, and almost hating react and react-router now. Please help.

    componentWillReceiveProps() {
       this.contextTypes = {
          history: React.PropTypes.object
       }
    },
    _handleRoute(e) {
       e.preventDefault()
       this.history.pushState(null, `/somepath`);
    },
    render() {
        return(
          <div onClick={this._handleRoute}>
            Some Content.
          </div>
        );
      }

or:

render() {
        return(
          <div>
            <Link to={`/somepath`}> link </Link>
          </div>
        );
      }

If you're using es2015 `class` syntax, try `this._handleRoute.bind(this)`, with [ref](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding). — fuyushimoya, Nov 12 '15 at 15:12
Which ones do you mean specifically? I have all that is there with the component working has.. @fuyushimoya It didn't work :/ — Emo, Nov 12 '15 at 15:17
Maybe you can post the whole component, with the unnecessary parts removed? — fuyushimoya, Nov 12 '15 at 15:28
Actually, component is pretty simple. The details is that this component represents objects that are on a googlemaps view. Also, I'm using hash-based routing. — Emo, Nov 12 '15 at 15:31
At first glance seems that the context of `_handleRoute` is not the same than the context in which `history` is defined but without further information it is difficult to say... — Henry Vonfire, Nov 12 '15 at 15:36
@HenryVonfire Where shall I define the history context? I updated the que with the relevant code. — Emo, Nov 12 '15 at 15:44
You should use `this.context.history` instead of `this.history` — Henry Vonfire, Nov 12 '15 at 15:48
Well, aham, location.hash = 'mypath' works like a charm. Love old school JS. — Emo, Nov 12 '15 at 16:15
Here in doc https://github.com/rackt/react-router they say you should install History as dependendency: `Note that you need to also install the history package since it is a peer dependency of React Router and won't automatically be installed for you in npm 3+.` Did you try that? — Battle_Slug, Nov 12 '15 at 20:50

Emo · Accepted Answer · 2016-04-25T10:01:36.600

React Router v1:

There's the pushState method in history object made for this.

First the component assigned for router has to give the child component the pushState method as a function prop:

//Router Component
render ()
  return (
    <SomeComponent changeRoute={this.props.history.pushState}
  )

Then, in the Component that I want to change route in a function, I simply do:

//SomeComponent
onClick() {
  this.props.changeRoute(null, 'somepath', {query: "something"});
}

React Router v.2

import {browserHistory} from 'react-router';

//SomeComponent

browserHistory.push('somepath');

score 2 · Answer 2 · answered Nov 13 '15 at 04:43

The error you're getting suggests that context.history is not defined.

Most likely, this is because you're not rendering a <Router> or equivalent component at the top level. Try starting with some of the examples provided with React Router and modifying them to suit your specific use case.

score 0 · Answer 3 · answered Jan 12 '16 at 09:06

It's been too long since I've asked this q, but I thought I'd answer the most simple and basic answer that I've found it to be working, which is:

location.hash: '/some-route?sheeps=black';

If anybody has a better, more 'React way' of doing it; please answer. I still don't mark this answer as the correct one.

score 0 · Answer 4 · answered Jul 29 '17 at 11:36

Update Answer with New React Rout and Update React To day date: 07/29/2017

All Version:

"history": "^4.6.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"

MY Rout Look LIke it...

 import {BrowserRouter,Route,Link} from 'react-router-dom'; // for BrowserRouter rout

<BrowserRouter>
        <div>
            <Route exact path='/' component={Layout}></Route>
            <Route path='/about' name="about" component={about}> </Route>
            <Route path='/protfolio' name="protfolio" component={protfolio}></Route>
        </div>
    </BrowserRouter >

More details about New React Rout Quick Start

For Link View or nav View

    <Link to="/about">Check rout link protfolio</Link>
     <Link to="/protfolio">Check rout link protfolio</Link>
   <button onClick={this.navigate.bind(this)}>button binf</button>

Final Look:

   navigate(){
        this.props.history.replace('/', null);
    }

if take console.log(this.props.history); Then your Browser console you get it...

push:function push(path, state)

So can not Use it like this.props.history.replace(null, '/');

Because here the path is null this is not possible.

score 0 · Answer 5 · answered Dec 21 '22 at 14:17

0

in react-router-dom v6 you have to use useNavigate()

like this:

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

const navigate = useNavigate();

navigate(`/cart/${id}?qty=${qty}`)

this way you can navigate to another url

answered Dec 21 '22 at 14:17

Mohammad Hussein Rostami

279
9

Cannot read property 'pushState' of undefined

5 Answers5

Linked