Cannot read property 'pushState' of undefined

问题

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

回答1:

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

回答2:

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.

回答3:

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.

回答4:

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.

来源：https://stackoverflow.com/questions/33674650/cannot-read-property-pushstate-of-undefined

标签

javascript

reactjs

react-router

url-routing