首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将browserHistory.push(‘/登录’)表单v2更改为React路由器V4中的替代

将browserHistory.push(‘/登录’)表单v2更改为React路由器V4中的替代
EN

Stack Overflow用户
提问于 2017-03-16 14:51:26
回答 1查看 261关注 0票数 0

在这篇关于流星与反应的教程中,作者使用了React路由器v2-3,我想使用新的React路由器v4来实现它。因此,我试图更改这个代码,它使用了react路由器v2:

代码语言:javascript
运行
复制
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:

代码语言:javascript
运行
复制
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 me错误:

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-16 17:41:38

您的应用程序中有/logout路径吗?我之所以这样问,是因为您可能正在使用传递到onClick支柱中的onClick方法来处理这个问题。

如果您查看<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路径

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42837475

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档