我有以下路由配置:
return (<div> <Router> <div> <Route path='/login' component={LoginPage}/> <EnsureLoggedInContainer> <Route path='/abc' component={abc} /> </EnsureLoggedInContainer> </div> </Router> </div> );
GuaranteeLoggedInContainer为:
import React from 'react'; import { connect } from "react-redux"; class EnsureLoggedInContainer extends React.Component { componentDidMount() { if ( !this.props.isLoggedIn ) { // this.props.history.push('/login'); this.context.router.push('/contact'); } } render() { // console.log(this.props); if ( this.props.isLoggedIn ) { return this.props.children; } else { return null; } } } const mapStateToProps = (state,ownProps) => { return{ isLoggedIn : state.isLoggedIn, // currentURL : this.props } } export default connect(mapStateToProps)(EnsureLoggedInContainer);
但是,历史的推动力:this.props.history.push('/login');没有用。这里没有历史。
this.props.history.push('/login');
如果我使用这样的配置:
<Route component={EnsureLoggedInContainer}> <Route path='/myjs' component={MyjsPage} /> </Route>
我遇到类似的问题:
Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored
reactjs中最好的身份验证方法是什么?
从我对您的React Router设计的了解中,您似乎正在使用React Router版本4
在这种情况下,您可以在组件本身中指定路由,并利用withRouter进行动态重定向,例如
return (<div> <Router> <div> <Route path='/login' component={LoginPage}/> <EnsureLoggedInContainer/> </div> </Router> </div> );
和
import React from 'react'; import { connect } from "react-redux"; import {withRouter} from "react-router"; class EnsureLoggedInContainer extends React.Component { componentDidMount() { if ( !this.props.isLoggedIn ) { this.props.history.push('/login'); } } render() { // console.log(this.props); if ( this.props.isLoggedIn ) { return <Route path='/abc' component={abc} /> } else { return null; } } } const mapStateToProps = (state,ownProps) => { return{ isLoggedIn : state.isLoggedIn, // currentURL : this.props } } export default connect(mapStateToProps)(withRouter(EnsureLoggedInContainer));