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

spik3s 发表于 Dev

spik3s：

我等不及了，我跳入使用react-routerv4 的最新alpha版本。全新功能<BrowserRouter/>可以使您的UI与浏览器历史记录保持同步，但是如何使用它进行编程导航？

哈兰·伍德（Harlan T Wood）：

路由器会将一个history对象添加到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>
    )
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。