我遇到了PrivateRoute问题。它不呈现组件Useraccess。 App.js
import React , { useState , useEffect} from "react";
import { BrowserRouter as Router, Route, Redirect , Switch} from "react-router-dom";
import routes from "./routes";
import withTracker from "./withTracker";
import "bootstrap/dist/css/bootstrap.min.css";
import "./shards-dashboard/styles/shards-dashboards.1.1.0.min.css";
import { useTranslation } from "react-i18next";
import MainSidebar from "./components/layout/MainSidebar/MainSidebar";
import DefaultLanguage from "./components/layout/MainNavbar/NavbarNav/DefaultLanguage";
import 'core-js/fn/object/assign';
import 'core-js/fn/promise';
import 'core-js/es6/array';
import 'core-js/es6/object';
import 'core-js/es6/symbol';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
//import 'core-js/es6/date';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import UserContext from "./config/UserContext";
import { Spinner } from 'react-bootstrap';
import Identity from "./components/create identity/Identity";
import Managecategories from "./views/ManageCategories";
import ManageDomains from "./views/ManageDomains";
import ListPopulate from "./components/Manage-Black-Red-List/ListPopulate";
import ManageGS from "./views/ManageGS";
import BatchUpload from "./views/BatchUpload";
import BulkIdentityDelete from "./views/BulkIdentityDelete";
import ViewLogs from "./Supervision/LogsSupervision/ViewLogs";
import ManageNews from "./components/layout/News/ManageNews";
import EditIdentity from "./views/EditIdentity";
import AdvancedSearch from "./views/AdvancedSearch";
import Logs from "./views/Logs";
import ManagePartners from "./views/ManagePartners";
import SearchandModify from "./views/SearchandModify";
import { withRouter } from "react-router";
// var block;
// var access = 'Admin'
var Authenticated = false;
const fakeAuth = {
isAuthenticated: Authenticated,
authenticate(cb) {
this.isAuthenticated = true
setTimeout(cb, 100)
},
signout(cb) {
this.isAuthenticated = false
setTimeout(cb, 100)
}
}
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
fakeAuth.isAuthenticated
? <Component {...props} />
: <Redirect to="/Useraccess" />
)} />
)
class App extends React.Component {
constructor(props) {
super(props);
this.state ={
access:null,
block:null,
}
}
async componentDidMount(){
if(this.props.ftRole === undefined)
{
return(
<div style={{ textAlign: 'center' }}>
<Spinner animation="grow" variant="primary" />
</div>)
}
else{
await this.setState({
access:this.props.ftRole,
})
if( this.state.access ==='Admin'){
this.state.access = 'Admin'
}
else if( this.state.access ==='Read_Write'){
Authenticated = false
this.state.access = 'Read_Write'
await this.setState({block:<div><PrivateRoute path='/managecategories' Authenticated component={Managecategories} /><PrivateRoute path='/managedomains' component={ManageDomains} Authenticated/>
<PrivateRoute path='/listpopulate' component={ListPopulate} Authenticated/><PrivateRoute path='/managepartners' component={ManagePartners} Authenticated/>
<PrivateRoute path='/managegs' component={ManageGS} Authenticated/>
<PrivateRoute path='/batchupload' component={BatchUpload} Authenticated/>
<PrivateRoute path='/bulkidenitydelete' component={BulkIdentityDelete}/>
<PrivateRoute path='/managenews' component={ManageNews} Authenticated/>
<PrivateRoute path='/managecategories' component={Managecategories} Authenticated/>
</div>})
}
else if (this.state.access ==='Mass_Upload'){
await this.setState({block: <div><PrivateRoute path='/managecategories' component={Managecategories}/><PrivateRoute path='/managedomains' component={ManageDomains}/>
<PrivateRoute path='/listpopulate' component={ListPopulate}/><PrivateRoute path='/managepartners' component={ManagePartners} /><PrivateRoute path='/searchandmodify' component={SearchandModify}/>
<PrivateRoute path='/managegs' component={ManageGS}/><PrivateRoute path='/logs' component={Logs} /><PrivateRoute path='/advancedsearch' component={AdvancedSearch}/></div>})
this.state.access = 'Mass_Upload'
Authenticated = false
}
else if (this.state.access ==='Subsidiary_Manager'){
await this.setState({block: <div><PrivateRoute path='/managecategories' component={Managecategories}/><PrivateRoute path='/managedomains' component={ManageDomains}/>
<PrivateRoute path='/listpopulate' component={ListPopulate}/><PrivateRoute path='/managepartners' component={ManagePartners}/>
<PrivateRoute path='/createidentity' component={Identity}/>
<PrivateRoute path='/startbatchupload' component={BatchUpload}/>
<PrivateRoute path='/bulkidenitydelete' component={BulkIdentityDelete}/>
<PrivateRoute path='/viewlogs' component={ViewLogs}/><PrivateRoute path='/managenews' component={ManageNews}/>
<PrivateRoute path='/listpopulate' component={ListPopulate}/>
<PrivateRoute path='/logs' component={Logs}/><PrivateRoute path='/searchandmodify' component={SearchandModify}/><PrivateRoute path='/editidentity' component={EditIdentity}/>
</div>})
this.state.access = 'Subsidiary_Manager'
Authenticated = false
}
else if (this.state.access ==='Partner_Manager'){
await this.setState({block: <div><PrivateRoute path='/managecategories' component={Managecategories}/><PrivateRoute path='/managedomains' component={ManageDomains}/>
<PrivateRoute path='/listpopulate' component={ListPopulate}/><PrivateRoute path='/managegs' component={ManageGS}/>
<PrivateRoute path='/createidentity' component={Identity}/>
<PrivateRoute path='/startbatchupload' component={BatchUpload}/>
<PrivateRoute path='/bulkidenitydelete' component={BulkIdentityDelete}/>
<PrivateRoute path='/viewlogs' component={ViewLogs}/><PrivateRoute path='/managenews' component={ManageNews}/>
<PrivateRoute path='/listpopulate' component={ListPopulate}/>
<PrivateRoute path='/logs' component={Logs}/><PrivateRoute path='/searchandmodify' component={SearchandModify}/><PrivateRoute path='/editidentity' component={EditIdentity}/>
</div>})
this.state.access = 'Partner_Manager'
Authenticated = false
}
else if (this.state.access ==='Read'){
await this.setState({block: <div><PrivateRoute path='/managecategories' component={Managecategories}/><PrivateRoute path='/managedomains' component={ManageDomains}/>
<PrivateRoute path='/listpopulate' component={ListPopulate}/><PrivateRoute path='/managegs' component={ManageGS}/>
<PrivateRoute path='/createidentity' component={Identity}/>
<PrivateRoute path='/startbatchupload' component={BatchUpload}/>
<PrivateRoute path='/bulkidenitydelete' component={BulkIdentityDelete}/>
<PrivateRoute path='/viewlogs' component={ViewLogs} /><PrivateRoute path='/managenews' component={ManageNews}/>
<PrivateRoute path='/managecategories' component={Managecategories}/>
<PrivateRoute path='/editidentity' component={EditIdentity}/>
</div>})
this.state.access = 'Read'
Authenticated = false
}
else if (this.state.access ==='VIP'){
await this.setState({block: <div><PrivateRoute path='/managecategories' component={Managecategories}/><PrivateRoute path='/managedomains' component={ManageDomains}/>
<PrivateRoute path='/listpopulate' component={ListPopulate}/><PrivateRoute path='/managegs' component={ManageGS}/>
<PrivateRoute path='/startbatchupload' component={BatchUpload}/>
<PrivateRoute path='/bulkidenitydelete' component={BulkIdentityDelete}/>
<PrivateRoute path='/viewlogs' component={ViewLogs} /><PrivateRoute path='/managenews' component={ManageNews}/>
</div>})
this.state.access = 'VIP'
Authenticated = false
}
}
// if((window.sessionStorage.getItem('lang') === 'unset'))
// {
// window.sessionStorage.setItem('lang', 'unset');
// }
// else{
// window.sessionStorage.setItem('lang', 'set');
// }
}
render(){
return(
<div>
<div>
{routes.map((route, index) => {
return (
<Route
key={index}
path={route.path}
exact={route.exact}
component={withTracker(props => {
return (
<route.layout {...props} >
<route.component {...props} />
</route.layout>
);
})}
/>
);
})}
<Router basename='/next.gir'>
<Switch>
{this.state.block}
</Switch>
</Router>
{/* <Router basename='/next.gir'>{block}</Router> */}
</div>
<Route exact path="/" render={() => (
<Redirect to=""/>
)}/>
<MainSidebar user={this.state.access}/>
</div>
);
}
}
export default App;
浏览器中的URL发生了变化，但并不是立即呈现该组件，而是在刷新页面或再次点击相同的链接时显示 我想在任何用户尝试访问任何未经授权的URL时将页面重定向到/ Useraccess