可能用`onEnter`延迟组件渲染？

Question

我正在使用反应路由器onEnter属性来处理验证，如下所示，也如"auth-flow" example中所示。

function requireAuth(nextState, replace, next) { 
    Auth.validateToken() 
     .then(() => { 
     next(); 
     }) 
     .fail(() => { 
     replace('/login'); 
     next(); 
     }); 
    } 

    <Router history={history}> 
     <Route path="/" component={App} > 
     <IndexRoute 
      component={Dashboard} 
      onEnter={requireAuth} 
     /> 
     <Route 
      path="login" 
      component={LogInForm} 
     /> 
     </Route> 
    </Router> 

我使用的onEnter异步回调功能，因为我的令牌验证需要一个服务器调用。

我遇到的问题是此示例中的Dashboard组件在调用next()之前呈现/挂载。理想情况下，渲染将等待直到回调被触发。

我误解了这是如何工作的？有没有办法延迟渲染路由组件，直到某些条件成立？

Answer 1

千万不要延迟路由渲染，您的用户应该得到更好的。

这样做的方式完全不同，那就是让渲染的实际页面包含查看是否有人有权查看它的逻辑，其起始state的形式与authorized: false类似，并且回调切换使用this.setState({ authorized: resultFromCallback })。

这种状态变化将引起反应，您的网页上再次呼吁render()，如果值是不同，然后在你的页面的render()功能，您只需检查this.state.authorized看你是否应该向用户呈现一个包含UI所有他们应该看作匿名用户的位，或者他们应该作为授权用户看到的所有位。

... 
    componentDidount() { 
    whateverlib.checkForAuthorization(this.handleAuthorization); 
    }, 
    handleAuthorization(authorized) { 
    this.setState({ authorized }); 
    }, 
    render() { 
    if(this.state.authorized) { 
     return this.renderAuthorizedUI(); 
    } 
    return this.renderAnonymousUI(); 
    }, 
... 

还记得你的应用程序仍然是只是在网页上运行JavaScript，所以你为什么会连检查每次加载网页？你所需要做的就是检查任何页面，存储结果并完成。只要用户保持打开状态，他们的授权状态就不会自动从一个反应路由器应用程序管理的页面切换到另一个，因此您可以使用应用程序全局跟踪器。

var authorizer = require('./lib/whatever-thing-you-wrote-for-this'); 

var YourPage = React.createClass({ 
    ... 
    componentDidMount() { 
    if (!authorizer.isAuthorized()) { 
     authorizer.tryAuthorize(this.handleAuthorization); 
    } 
    }, 
    handleAuthorization() { 
    this.forceUpdate(); 
    }, 
    render() { 
    if(authorizer.isAuthorized()) { 
     return this.renderAuthorizedUI(); 
    } 
    return this.renderAnonymousUI(); 
    }, 
    ... 
});