javascript - 当我刷新页面时，React 路由器经过身份验证的路由正在重定向

Question

我的问题很简单，至少看起来是这样。我的 redux 存储中有状态，它保存用户是否登录的状态。这一切都工作正常，但是当用户刷新页面时，经过身份验证的状态会异步获取其数据，渲染会运行并且状态未定义。

由于状态未定义，我重定向到/login 运行，因此刷新会将我踢出应用程序并返回登录，然后检查我是否已经登录并将我带到主页。

关于如何解决此问题的任何想法:

  {
    !this.props.authenticated && (
      <Switch>
        <Route path="/login" component={LoginForm} />
        <Route path="/register" component={RegisterForm} />
        <Route path="" render={props => {
            return <Redirect to="/login" />
          }}
        />
      </Switch>
    )
  }

因此，当 this.props.authenticated 在短时间内为 false 时，它​​会触发登录重定向。但是，几毫秒后， this.props.authenticated 为 true，并且由于用户已经登录，因此被重定向到主路由。

有什么想法吗？

Answer 1

理想情况下，您不会立即渲染路线，而是等到您的身份验证请求得到解决并且您有一个明确的状态。

类似这样的事情:

class App extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      // You could just check if authenticated is null,
      // but I think having an extra state makes is more clear
      isLoading: true,
      authenticated: null,
    };
    
    this.checkAuthentication();
  }
  
  checkAuthentication() {
    // Some async stuff checking against server
    // I’ll simulate an async call with this setTimeout
    setTimeout(
      () => this.setState( {
        authenticated: Boolean( Math.round( Math.random() ) ),
        isLoading: false,
      } ),
      1000
    );
  }
  
  render() {
    // Render a loading screen when we don't have a clear state yet
    if ( this.state.isLoading ) {
      return <div>loading</div>;
    }
   
    // Otherwise it is safe to render our routes
    return (
      <div>
        routes,<br />
        random authenticated:
        <strong>
          { this.state.authenticated.toString() }
        </strong>
      </div>
    );
  }
}

ReactDOM.render( (
  <App />
), document.querySelector( 'main' ) );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<main></main>