reactjs – 在React-Router v4中以编程方式导航

前端之家收集整理的这篇文章主要介绍了reactjs – 在React-Router v4中以编程方式导航前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我等不及了,我开始使用最新的alpha版本的react-router v4。全新的< BrowserRouter />非常适合保持您的UI与浏览器历史记录同步,但如何使用它以编程方式导航?
路由器会将历史对象推送到props散列中的组件。所以在你的组件中,只需:

this.props.history.push( ‘/ mypath中’)

这是一个完整的例子:

在App.js中:

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

import Login from './Login'

export default class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Route exact path='/login' component={Login} />
        </div>
      </Router>
    )
  }
}

在Login.js中:

import React,{PropTypes} from 'react'

export default class Login extends React.Component {
  constructor(props) {
    super(props)
    this.handleLogin = this.handleLogin.bind(this)
  }

  handleLogin(event) {
    event.preventDefault()
    // do some login logic here,and if successful:
    this.props.history.push(`/mypath`)
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleLogin}>
          <input type='submit' value='Login' />
        </form>
      </div>
    )
  }
}

猜你在找的React相关文章