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}/>
作为开关的第三项
开关渲染与
地点
由于没有指定路径,我想它将始终匹配,开关
将不会使用后面的零件路径
作为一种解决方案,可以将其与重定向路径一起使用,也可以完全删除
如果您对专用路由的不同解决方案感兴趣,请查看本文,例如: