browserHistory undefined（react router v3）

Question

Im正在努力與反應路由器，因爲它返回「browserHistory是未定義」，當我試圖推動它。這裏是我的路線：

import React, { Component } from 'react'; 
import './App.css'; 
import UI from './UI.jsx'; 
import Home from './Home'; 
import Login from './Login'; 
import { browserHistory} from 'react-router'; 
import { BrowserRouter as Router, Route, Link} from 'react-router-dom'; 



class App extends Component { 

render() { 

    return (

    <div> 

    <Router history={browserHistory}> 
     <div> 
     <Route exact path="/" component={Home}/> 
     <Route path="/UI" component={UI}/> 
     </div> 
    </Router> 



    </div> 
    ); 
} 
} 

export default App; 

這裏是我使用browserHistory.push（）的文件;功能：

login(e) { 
     console.log(this.props.browserHistory); 
     e.preventDefault(); 
     var username = this.inputName.value; 
     var password = this.inputPassword.value; 
     axios.post(
      'https://jsonplaceholder.typicode.com/posts', 
      { 
       user_name: username, 
       user_password: password 
      } 
     ).then((response) => { 
      console.log(response.data); 
      console.log(response.data.user_name); 
      const username = response.data.user_name; 
      session = "&token=" + response.data.session; 
      if (username === null) { 
       this.setState({ loginFail: 'Användarnamnet eller lösenordet är fel' }); 
       return; 
      } else { 
       browserHistory.push('/UI'); //The UI is the component, here i'm getting "cannot read property push of undefined". 

       this.setState({ 
        showUser: `Hej ${response.data.user_name}`, 
        showLogin: !this.state.showLogin, 
        loggedIn: !this.state.loggedIn 
       }); 
      } 
     }); 
    } 

任何想法？

Answer 1

你必須要麼說

const { browserHistory } = this.props將其分配到一個varible，然後你可以做browserHistory.push('/UI');

或只是this.props.browserHistory.push('/UI')

Answer 2

感謝您的回覆快速去。儘管如此，仍有一些麻煩。我會發佈一個img的。 enter image description here

Answer 3

按照documentation你必須做的是：

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