成功登录后如何更改确切的路径

时间:2018-03-26 20:01:35

标签: javascript reactjs web ecmascript-6 jsx

我正在创建一个登录页面,在成功登录主页后重定向用户我正在使用反应路由器dom我试图寻找一种简单的方法来做但我找不到:

import Authen from './Pages/Authen';
import Home from './Pages/Home';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
class App extends Component {
  render() {
    return (
  <div className="App"> 

    <Router>
    <div>
      <ul>
      </ul>
      <Route exact path="/" component={Authen}/>
      <Route path="Home" component={Home}/>
    </div>
  </Router>
  </div>

感谢您的帮助,我非常感谢:)

1 个答案:

答案 0 :(得分:0)

  

登录页面,用于在成功登录home后重定向用户   页

使用react-router-dom附带的withRouter高阶组件。它将使您的组件进入历史道具。使用历史记录,您可以推送到任何新URL。

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

class Authen extends React.Component {

onLogin = () => {
  // also other authentication code
 this.props.history.push('/home')
}

render() {
 return (
   <button onClick={() => this.onLogin()}> Login </button>
  )   
 }   
}

export default withRouter(Authen);