在 React Router V4 中将 browserHistory.push('/login') form v2 更改为 alternative

Question

在 Meteor and React 的本教程中，一位作者使用了 react-router v2-3，我想使用新的 React-router v4 来完成。所以我尝试更改使用 react-router v2 的代码：

import React from 'react';
import { IndexLink, Link, browserHistory } from 'react-router';

export class Navigation extends React.Component {
    logout(e) {
        e.preventDefault();
        Meteor.logout(function() {
            browserHistory.push('/login');
        });
    }

    render() {
        return (
            <nav className="navbar navbar-default">
              <div className="container-fluid">
                ...    
                <div className="collapse navbar-collapse" id="main-nav">
                  <ul className="nav navbar-nav">
                    <li><IndexLink to="/" activeClassName="active">Dashboard</IndexLink></li>
                    <li><a href="#" onClick={this.logout}>Logout</a></li>
                  </ul>
                </div>
              </div>
            </nav>
        )
    }
}

对于使用 v4 的这个：

import React from 'react'
import { NavLink } from 'react-router-dom'

export class Navigation extends React.Component {
  logout(e){
    e.preventDefault()
    Meteor.logout(function () {
      this.context.history.push('/login')
    })
  }
  render () {
    return (
      <nav className='navbar navbar-default'>
        <div className='container-fluid'>
          ... 
          <div className="collapse navbar-collapse" id="main-nav">
            <ul className="nav navbar-nav">
              <li><NavLink to="/" activeClassName="active">Dashboard</NavLink></li>
              <li><NavLink to="/logout" activeClassName="active"
                           onClick={this.logout.bind(this)}>Logout</NavLink></li>
            </ul>
          </div>
        </div>
      </nav>
    )
  }
}

但是浏览器console.logs 给我一个错误：

Answer 1

您的应用程序中是否有 /logout 路径？我问是因为您可能正在使用传递给 onClick prop.

的 logout 方法来处理该问题

如果你看看 <Link> 是如何工作的 https://github.com/ReactTraining/react-router/blob/v4.0.0-beta.8/packages/react-router-dom/modules/Link.js 您可以查看是否有一个名为 onClick 的道具，组件将使用事件参数调用该函数，如果事件尚未将 defaultPrevented 设置为 true <Link> 将尝试转到 /logout 路径

在 React Router V4 中将 browserHistory.push('/login') form v2 更改为 alternative

Change browserHistory.push('/login') form v2 to alternative in React Router V4

meteor

react-router-v4