时间戳

首页 > 解决方案 > 反应路由器需要一些时间来重定向/渲染

reactjs - 反应路由器需要一些时间来重定向/渲染

问题描述

为什么？

没有路由器，它会立即呈现，但使用路由器，在页面刷新时呈现登录组件需要 5 秒。

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={()=>Loading()} persistor={persistor}>
    <Router history={hist}>


        <Route path="/admin" render={props => <AdminLayout {...props} />} />
        <Route path="/rtl" render={props => <RTLLayout {...props} />} />
        <Route path="/login" component={Login} />
        <Route path="/apps" render={props => <AppsLayout {...props} />} />

        <Redirect from="/" to="/login" />

标签： reactjsreact-router

解决方案

试试这个。

        <Redirect from="/" to="/login" />
        <Switch>
        <Route path="/admin" render={props => <AdminLayout {...props} />} />
        <Route path="/rtl" render={props => <RTLLayout {...props} />} />
        <Route path="/login" component={Login} />
        <Route path="/apps" render={props => <AppsLayout {...props} />} />
        </Switch>

如果您尝试在每次访问您的应用程序时呈现登录组件，我建议您使用不同的方法。我建议你在你的 中定义一个状态变量isLoggedIn: false，app.js(or whatever your landing page is)然后你可以在渲染中测试它的值。

if(!this.state.isLoggedIn) {
     this.props.history.push('/login');
   } else {
    //whatever you want
   }

或者

if(this.state.isLoggedIn) {
    return <Redirect to='/login'/>
   } else {
    return <HomePage/>
   }

您希望如何实现您所追求的目标。

推荐阅读