Eigenschaft 'pushState' von undefined kann nicht gelesen werden

Question

Ich habe diese einfache Konfiguration für den React Router. Ich habe einen anderen mit im Grunde mit ..., was funktioniert. Aber dieses tut nicht (natürlich versuchte ich, mit verschiedenen Implementierungen zu verwenden, wie in den Antworten von this post und vielen anderen vorgeschlagen.

Der Konsolenfehler ist der Titel dieses Beitrags. Using ES6, und reag-router v .1 mit Hash-basierten Routing.

ich las viele von Artikeln, auch nicht notwendig für eine einfache Routing umgesetzt werden, und fast hassen reagieren und reagieren-Router jetzt. Bitte helfen.

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

oder:

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

Answer 1

Reagieren Router v1:

Es gibt die Methode in der Geschichte pushstate-Objekt für diese gemacht.

Zunächst wird die Komponente für Router zugewiesen hat das Kind Komponente die pushstate Methode als Funktion Stütze geben:

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

Dann wird in der Komponente, die ich Route wollen in einer Funktion ändern, kann ich einfach:

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

Reagieren Router v.2

import {browserHistory} from 'react-router'; 

//SomeComponent 

browserHistory.push('somepath'); 

Answer 2

Der Fehler, den Sie erhalten, schlägt vor, dass context.history nicht definiert ist.

Höchstwahrscheinlich liegt das daran, dass Sie keine <Router> oder eine gleichwertige Komponente auf der obersten Ebene rendern. Versuchen Sie, mit einigen der Beispiele zu beginnen, die mit React Router zur Verfügung gestellt werden, und modifizieren Sie sie entsprechend Ihrem speziellen Anwendungsfall.

Answer 3

Es ist zu lange her, dass ich diesen q gefragt habe, aber ich dachte, dass ich Antwort der einfachste und elementarste beantworten würde, die ich gefunden habe, es zu funktionieren, das ist:

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

Wenn Jeder hat einen besseren, reaktionsfähigeren Weg es zu tun; bitte antworte. Ich habe diese Antwort immer noch nicht als die richtige markiert.

Answer 4

aktualisieren Antwort mit New Reagieren Rout und aktualisieren Reagieren Zum Tag Datum: 07/29/2017

Alle 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 schauen, wie es ...

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 > 

Mehr Details über New React Rout Quick Start

Für Link- Anzeigen oder nav Ansicht

<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> 

endgültiges Aussehen:

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

wenn nehmen console.log(this.props.history); Ihre Browser-Konsole Sie es dann bekommen ...

push:function push(path, state)

kann es also nicht verwenden wie this.props.history.replace(null, '/');

Da hier der Weg null ist dies nicht möglich ist.