在我的反应应用程序中,我尝试在登录后重定向到仪表板,但由于受保护的路由名称不是“路由”,因此路由器无法将其检测为路由并只是更改URL。 我已经检查过无保护和简单的路线,例如注册'并且在重定向过程中像魅力一样加载。
似乎路由器4无法将受保护路由检测为路由。
这是我在app.jsx中的路线:
const routes = (
<Router>
<div>
<Route exact path="/" component={Login}/>
<Route path="/login" component={Login}/>
<Route path="/register" component={Register}/>
<Route path="/resetpassword" component={ResetPassword}/>
<RestaurantAuthRoute path="/dashboard" component={RPDashboard}/>
<RestaurantAuthRoute path="/dashboard/addfood" component={RPAddFood}/>
</div>
</Router>
);
RestaurantAuthRoute.jsx:
var {connect} = require('react-redux');
var loginAuth = require('../api/loginAuth');
import {bindActionCreators} from 'redux';
import * as actions from 'actions';
import { Route, Redirect } from 'react-router-dom';
class RestaurantAuthRoute extends React.Component {
constructor(props){
super(props);
}
componentWillMount() {
var mytoken = localStorage.getItem('token');
var that = this;
loginAuth.restaurantAuthCheck(mytoken).then( function(res){
if(res.success == true){
that.props.actions.setRestaurantAuth(true);
}
else if(res.success == false){
that.props.actions.setRestaurantAuth(false);
}
});
}
render() {
if(this.props.restaurantLog.status == true || this.props.restaurantLog.status == false){
const { component: Component, restaurantLog, ...rest } = this.props;
return (
<Route {...rest} render={props => {
return restaurantLog.status
? <Component {...props} />
: <Redirect to="/login" />
}} />
)
}
else{
return(<p>wait</p>)
}
}
}
function mapStateToProps(state, ownProps){
return{
restaurantLog: state.logRestaurantState
}
}
function MapDispatchToProps(dispatch){
return{
actions: bindActionCreators(actions, dispatch)
}
}
export default connect(
mapStateToProps,
MapDispatchToProps
)(RestaurantAuthRoute);