反应路由器无法重定向到受保护的路由(只需更改URL)

时间:2017-12-01 10:22:12

标签: reactjs react-router router react-router-v4 react-router-dom

在我的反应应用程序中,我尝试在登录后重定向到仪表板,但由于受保护的路由名称不是“路由”,因此路由器无法将其检测为路由并只是更改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);

0 个答案:

没有答案