重新加载后的反应路由器总是重定向到仪表板答案

【问题标题】：React Router after reload always redirected to dashboard重新加载后的反应路由器总是重定向到仪表板
【发布时间】：2019-03-18 11:10:56
【问题描述】：

我对 React 路由器有一个问题。这是我的应用程序类。我检查我的令牌，如果它有效，我会重定向到仪表板页面。

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>
    );
}

}

如果您授权，我有不同的路线到其他组件。总是当我尝试重新加载页面时，我会转到“/”页面。例如：我留在'/contacts'，但当我重新加载页面时，我转到'/'。我该如何解决？

class CoreLayout extends Component {
render() {
    return (
        <div>
            <Menu/>
            <Switch>
                <Route exact path='/' component={Dashboard}/>
                <Route path='/contacts' component={Contacts}/>
                <Route path='/assignment' component={Assignment}/>
                <Route path='/tasks' component={Tasks}/>
            </Switch>
        </div>
    );
}

}

谢谢

【问题讨论】：

如果 this.props.history.push('/') 加载了 App 组件，您将明确强制它重定向到 /。你想让它做什么？

标签： reactjs react-router

【解决方案1】：

由于你的componentDidMount() 方法；

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

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

所以尝试根据您的要求更改checkAuth() 方法。

【讨论】：

要添加到这一点，您可以从react-router 中调用push() 来重定向而不重新加载。
但是我如何在不推送的情况下重定向到私人页面？对不起，愚蠢的问题，我是 reactjs 的新手。
你可以使用 Redirect, Link 标签 from react-router

【解决方案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('/');
            }
        });
    }
}

【讨论】：

【解决方案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>
);
}

一旦我将重新加载应用程序，它将执行组件将卸载函数以设置会话存储并检查会话内的渲染函数是否可用以应用 history.push('\') 或任何你想要

【讨论】：

一旦我将重新加载应用程序，它将执行 componentwillunmount 函数来设置会话存储并检查会话内的渲染函数是否可用以应用 history.push('\')或任何你想要的