Cannot read property "pushState" from undefined

Question

I have this simple configuration for a React Router. I have another one, mostly wrapping ... that works. But this is not (of course, I tried to use it with various implementations, for example, those proposed in the answers of this post and many others.

The console error is the header of this message. Using ES6 and reactive router v.1 using hash-based routing

I have read many articles that are too unnecessary for simple routing to be implemented, and almost hate to react and react-router. 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> ); } 

Answer 1

React Router v1:

This created the pushState method in the history object.

First, the component assigned to the router must give the child component the pushState method as a prop function:

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

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

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

React Router v.2

 import {browserHistory} from 'react-router'; //SomeComponent browserHistory.push('somepath'); 

Answer 2

The error you get suggests that context.history is undefined.

Most likely, this is because you are not showing the <Router> or equivalent component at the top level. Try starting with some examples provided with the React Router and modify them to suit your specific use case.

Answer 3

It has been too much time since I asked for this q, but I thought I would answer the simplest and easiest answer that I found works:

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

If someone has a better one, more “React” to it; Answer please. I still do not mark this answer as correct.

Answer 4

Update the response with the new React Rout and Update React . Date of the day: 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 > 

Read more about New Quick Launch Re-Routing

For Link View or Navigation 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 you accept console.log(this.props.history); Then you get your browser console ...

push:function push(path, state)

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

Because the path is null here, this is not possible.