Question

我对React Router有一个问题。这是我的App课。我检查令牌，如果它有效，我会重定向到仪表板页面。

function searchForPackage(directory){
    fs.readdir(directory, function(err, files){
        if(err){
            return;
        }else{
            files.forEach(file => {
                var currentLocation = directory + "/" + file;
                if(fs.statSync(currentLocation).isDirectory() && file != 'bin' && file != '.bin'){
                    searchForPackage(currentLocation);
                    return;
                }else if(file == "package.json"){
                    var content = fs.readFileSync(currentLocation);
                    var jsonContent = JSON.parse(content);
                    var obj = {
                        name: jsonContent.name,
                        license: jsonContent.license,
                        version: jsonContent.version
                    }
                    jsonTable.push(obj);
                    jsonTable.push({name: jsonContent.name, license: jsonContent.license, version: jsonContent.version});
                    return;
                }
            })
        }
    })
  }

}

在这里，如果您授权，我到其他组件的路线也不同。总是在我尝试重新加载页面时转到“ /”页面。例如：我停留在“ /联系人”上，但是当我重新加载页面时，我转到“ /”。我该如何解决？

class App extends Component {
constructor(props){
    super(props);
    this.checkAuth = this.checkAuth.bind(this);
}

checkAuth(){
    if(localStorage.getItem(ACCESS_TOKEN)){
        getCurrentAccount().then(response => {
            this.props.onLoadCurrentAccount({ account: response, isAuthenticated: true });
            this.props.history.push('/');
        });
    }
}

componentDidMount() {
    this.checkAuth();
}

render() {
    return (
        <div>
            <Switch>
                <Route path='/login' component={Login}/>
                <Route path='/signup' component={Signup} />
                <PrivateRoute authenticated={this.props.account.isAuthenticated} path='/' component={CoreLayout} />
                <Route component={NotFound}/>
            </Switch>
        </div>
    );
}

}

谢谢

Answer 1

由于您的componentDidMount()方法；

在componentDidMount()方法中，您正在调用正在使用

的checkAuth()方法

this.props.history.push('/');

因此请尝试根据您的要求更改checkAuth()方法。

Answer 2

您需要先添加支票，然后才能将其推送到首页。如果用户未通过身份验证，则将其重定向到首页

checkAuth(){
    if(localStorage.getItem(ACCESS_TOKEN)){
        getCurrentAccount().then(response => {
            this.props.onLoadCurrentAccount({ account: response, isAuthenticated: true });
            if (IS_NOT_AUTHENTICATED) { // Change your condition for if user is not authenticated
             this.props.history.push('/');
            }
        });
    }
}

Answer 3

componentWillMount() {
sessionStorage.reload = true;
}
render() {
if(sessionStorage.reload && history.location.pathname!=='/') {
  console.log(this.props);
  sessionStorage.reload = "";
  history.push('/login');
} 
return (
  <Router history={ history }>
  <div className="App">
    <Switch>
      <>
      <Route path="/" exact strict component={ Loginpage } />
      <Route path="/mapview" exact component={ GoogleMap } />
      <Route path="/dashboard" exact component={ Dashboard } />
      <Route path="/tripList" exact component={ TripList } />
      <Route path="/createTrips" exact component={ CreateTrips } />
      <Route path="/trace" exact component={ trace } />
      <Route path="/vehicleinfo" component={ vehicleinfo } />
      <Route path="/MyPeople" component={ MyPeople } />
      <Route path="/AddForm" component={ MyPeople } />
      <Route path="/ListView" component={ ListView } />
      <Route path="/fleetAlerts" component={FleetAlerts} />

      <Route path="/login" exact component={ Loginpage } />
      </> 
    </Switch>
  </div>
  </Router>
);
}

一旦我重新加载应用程序，它将执行该组件的unmount函数以设置会话存储，并检查session内部的render函数是否可用以应用history.push（'\'）或其他想要

重新加载后的React Router始终重定向到仪表板

3 个答案: