browserHistory 未定义（反应路由器 v3）答案

【问题标题】：browserHistory undefined (react router v3)browserHistory 未定义（反应路由器 v3）
【发布时间】：2017-11-02 14:42:50
【问题描述】：

我正在努力应对反应路由器，因为当我尝试推送它时它返回“browserHistory is undefined”。这是我的路线：

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

有什么想法吗？

【问题讨论】：

我猜你得到了那个错误，因为你没有登录组件作为<Router>中的路由
喜欢这个？ puu.sh/w7AHk/093809060d.png 还是一样的错误:'(

标签： reactjs dom react-router

【解决方案1】：

你必须通过说将它分配给一个变量

const { browserHistory } = this.props 然后你可以做browserHistory.push('/UI');

或者直接选择this.props.browserHistory.push('/UI')

【讨论】：

【解决方案2】：

根据documentation你要做的是：

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

【讨论】：