this.context.router.push nie działa

Question

Używam wersji routera 4.0. Próbuję nawigować z jednego komponentu do drugiego po kliknięciu przycisku. W tym celu zaimplementowałem routing reagowania. Po wdrożeniu po kliknięciu przycisku nawigacji, wyświetlany jest komunikat "Uncaught TypeError: this.context.router.push nie jest funkcją" i ostrzeżenie "Typ kontekstu zakończonego niepowodzeniem: Nieprawidłowy kontekst router typu object dostarczony pod EmpLogin, oczekiwany function. " Próbowałem dużo, ale nie mogłem sprawić, żeby działało. poniżej znajduje się moja implementacja komponentu i routingu. Wcześniej korzystałem z routera reagowania 2.0 i browserhistory.push. Realizacja

export class EmpLogin extends React.Component { 
    constructor(props) { 
super(props); 
this.state = { 

}; 
} 

loginID(e) { 
this.setState({loginID: e.target.value}); 
} 

Password(e) { 
this.setState({password: e.target.value}); 
} 

navigate(e){ 
    e.preventDefault(); 
    this.context.router.push('/EmpDetails'); 
    } 

render() { 
    return (
    <div> 
    <div > 
     <form> 
     <input type="text" onChange={this.loginID.bind(this)} /> 
     <input type="password" onChange={this.Password.bind(this)} /> 
     <div> 
      {this.props.children} 
      <button onClick={this.navigate.bind(this)}>feature</button> 
     </div> 
     </form> 
    </div> 
    </div> 
); 
} 
} 

    EmpLogin.contextTypes = { 
    router: React.PropTypes.func.isRequired 
} 

export default EmpLogin; 

Routing -

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import EmpLogin from './EmpLogin'; 
import {Router, Route,HashRouter} from 'react-router-dom'; 
import {browserHistory,hashHistory} from 'react-router'; 
import EmpDetails from './EmpDetails'; 

ReactDOM.render((
<HashRouter> 
<div> 
    <Route exact path='/' component={EmpLogin}/> 
    <Route path='/Emplogin' component={EmpLogin}/> 
    <Route path='/EmpDetails' component={EmpDetails} /> 
    </div> 
    </HashRouter> 
), document.getElementById('root')); 

Answer 1

Z błędem wydaje się, że szuka router jako obiekt:

Spróbuj tego:

EmpLogin.contextTypes = { 
    router: React.PropTypes.object.isRequired 
} 

Ponadto można spróbować transitionTo zamiast push() wraz z abov e metoda

this.context.router.transitionTo('/EmpDetails'); 

Answer 2

należy użyć browserHistory od reagują-router zamiast ...

browserHistory.push('/EmpDetails'); 

Answer 3

Poprawny sposób nawigować za pomocą kontekstu, w reagują-routera v4:

this.context.router.history.push('/EmpDetails') 

Nowa react-router v4 zmienił lokalizację metody push podczas uzyskiwania dostępu do this.context.router. router ma teraz jako właściwości i znajduje się w zakresie history, że znajdziesz przydzieloną metodę.

Ponadto, jeśli używasz najnowszej wersji 15.5.0 reagować, propTypes zostały usunięte w oddzielnym opakowaniu i można je dostać z:

npm install prop-types --save 

lub

yarn add prop-types 

Jest napisane z powodów związanych z dokumentacją. Odpowiedzi innych użytkowników nie rozwiązały problemu, a ponieważ miałem ten problem, postanowiłem go wypełnić dla wygody przyszłych programistów.