React browserHistory.push Uncaught TypeErrorを与える：未定義のプロパティ 'push'を読み取ることができません

Question

私はクリック時にページを変更しようとしています。ここ は、クリック機能は

import React, { Component } from 'react'; 
import {BrowserRouter as Router,Route} from 'react-router-dom'; 
import { browserHistory } from 'react-router'; 
class Buttons extends Component { 
skipClick(){ 
    browserHistory.push('/sessionstate2'); 
} 
render() { 
return (<a className={skipShow} onClick={this.skipClick}>Skip</a>) 
} 
} 

と

import browserHistory from 'react-router'; 
ReactDOM.render(
    <Router history={browserHistory}> 
    <div> 
     <Route exact path="/" component={App} /> 
     <Route exact path="/sessionstate1" component={Template1}/> 
     <Route exact path="/sessionstate2" component={Template2}/> 
     <Route exact path="/sessionstate3" component={Template3}/> 
</div> 
    </Router>, 
    document.getElementById('root') 
); 

index.jsそれはあなたが私がここで間違って何をやっている私に教えていただけますか？

Uncaught TypeError: Cannot read property 'push' of undefined

を与えていますか

Answer 1

ここでは、反応ルータv4のルートをプログラムで変更する方法の再現可能な例を示します。

まず、シンプルなアプリのための定型をインストール：あなたがいる場合

npm run start 

：次に、あなたのサーバを起動

import React from 'react' 
import {BrowserRouter as Router, Route, Link, withRouter} from 'react-router-dom' 

const BasicExample =() => (
    <Router> 
    <div> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
    </div> 
    </Router> 
) 

const Home =() => (
    <div> 
    <h2>Home</h2> 
    </div> 
) 

const Button = withRouter(({history}) => (
    <button type='button' onClick={() => { history.push('/new-location') }}>Click Me!</button> 
)) 

const About =() => (
    <div> 
    <h2>About</h2> 
    <Button /> 
    </div> 
) 

export default BasicExample 

：/src/App.jsに

sudo npm install -g create-react-app 
create-react-app demo-app 
cd demo-app 
npm install react-router-dom 

はその後、我々は変化しますlocalhost：3000に移動し、「バージョン情報」をクリックすると、ボタンコンポーネントが表示されます。これをクリックすると、プログラムによって経路が変更されます/new-location

Answer 2

browserHistoryをもう使用する必要はありません。 React-Router-Domは、コンポーネントに関連する小道具とコンテキストをルートに注入します。 これらの小道具の1つは「歴史」であり、この歴史上、オブジェクトは、あなたが呼び出すことができ、ナビゲートしたいルートを渡すことができる機能プッシュです。クラスベース成分で

たとえば、関数ベースステートレスなコンポーネント

redirectToSessionStatePage() { 
props.history.push('/sessionstate2'); OR 
context.router.history.push('/sessionstate2'); 
}