为什么使用 history.push 推送新的 /user/login URL 后 Login 组件不呈现?但是对于 /user/login URL 的显式请求,会根据需要呈现 Login 组件。
import './../bootstrap'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Route, Switch } from 'react-router-dom'
import {withRouter} from "react-router-dom"
import Header from './Header'
import Login from './Login'
import Footer from './Footer'
class App extends Component {
componentWillMount() {
if ( ! this.props.auth ) {
this.props.history.push( '/user/login' )
}
}
render() {
return (
<div>
<Header />
<Switch>
<Route path='/user/login' component={Login}/>
</Switch>
<Footer />
</div>
)
}
}
const mapStateToProps = state => {
return {
auth: state.auth
}
}
export default connect( mapStateToProps )( withRouter( App ) )
更改应用程序导出后一切正常
曾经和不起作用的选项:
使一切正常工作的选项:
显然重点是 withRouter 是一个高阶函数,在这种情况下,它必须应用于 connect 函数的结果。