Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/456.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何使用react路由器实现路由私有化_Javascript_Reactjs_Authentication_React Router - Fatal编程技术网

Javascript 如何使用react路由器实现路由私有化

Javascript 如何使用react路由器实现路由私有化,javascript,reactjs,authentication,react-router,Javascript,Reactjs,Authentication,React Router,我想为管理员访问设置一些私有路由。 成功登录后,管理员可以访问路径。 但在这里,我在登录时遇到了问题,它正在重定向到错误页面 我还需要在这里做些什么才能让这条路线成为私人路线? 任何建议。提前谢谢 //main.js import React, { Component } from 'react'; import {Switch, Route} from 'react-router-dom'; import { connect } from 'react-redux'; import PropT

我想为管理员访问设置一些私有路由。 成功登录后,管理员可以访问路径。 但在这里,我在登录时遇到了问题,它正在重定向到
错误页面

我还需要在这里做些什么才能让这条路线成为私人路线? 任何建议。提前谢谢

//main.js

import React, { Component } from 'react';
import {Switch, Route} from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Homepage from './user/Homepage';
import Aboutme from './user/AboutMe';
import Error from './user/Error';
import Dashboard from './admin/Dashboard';

class Main extends Component {
    static propTypes = {
        auth: PropTypes.object.isRequired
    }


    render(){
        const { isAuthenticated, user } = this.props.auth;

        return(
            <Switch>
            <Route  exact path="/" component={Homepage}/>
            <Route path="/about" component={Aboutme}/>
            <Route component={Error}/>
            { user ? (user.is_admin === true && isAuthenticated ? 
           ( <Route path="/dashboard" component={Dashboard}/> ) : ( <Route component={Error}/>) ):  <Route component={Error}/> }

            </Switch>

        )
    }

}

const mapStateToProps = state => ({
auth: state.auth
});

export default connect(mapStateToProps, null)(Main);
import React,{Component}来自'React';
从“react router dom”导入{Switch,Route};
从'react redux'导入{connect};
从“道具类型”导入道具类型;
从“./user/Homepage”导入主页;
从“./user/Aboutme”导入Aboutme;
从“./user/Error”导入错误;
从“/admin/Dashboard”导入仪表板;
类主扩展组件{
静态类型={
auth:PropTypes.object.isRequired
}
render(){
const{isAuthenticated,user}=this.props.auth;
返回(
{user?(user.is_admin===true&&isAuthenticated?
(  ) : ( ) ):   }
)
}
}
常量mapStateToProps=状态=>({
auth:state.auth
});
导出默认连接(MapStateTops,null)(主);

这是因为您

 <Route component={Error}/>

作为开关的第三项

开关渲染与 地点

由于没有指定路径,我想它将始终匹配,
开关
将不会使用后面的零件路径

作为一种解决方案,可以将其与重定向路径一起使用,也可以完全删除

如果您对专用路由的不同解决方案感兴趣,请查看本文,例如: