反应路由器dom渲染空白页面答案

【问题标题】：React router dom render blank page反应路由器dom渲染空白页面
【发布时间】：2021-04-23 14:09:06
【问题描述】：

我正在使用react-router-dom 导航到我的应用程序中的不同页面，其中包含一些与经过身份验证的用户相关的受保护路由。

问题是有时路由器会呈现一个空白页面，迫使我刷新页面以再次呈现。

我的 App.js 路由器：

 <Switch>
            <Route path="/" component={HomePage} exact></Route>
            <Route path="/user" component={Authentication} ></Route>
            <Route path="/latest-blogs" component={Articles} exact></Route>
            <Route path="/faq" component={Support} exact></Route>
            <Route path="/contact-us" component={ContactUsPage} exact></Route>
            <Route path="/faq/:id" component={Support} exact></Route>
            <Route path="/blogs" component={Blogs} exact></Route>
            <Route path="/blogs/:id" component={SingleArticle} exact></Route>
            <Route path="/blogs/category/:id" component={Blogs} exact></Route>
            <Route path="/blogs/category/:id/:slug" component={Blogs} exact></Route>
            <Route path="/blogs/:id/:slug" component={SingleArticle} exact></Route>
            <Route path="/fees" component={Fees} exact></Route>
            <GuardedRoute path='/profile' component={Profile} />
            <GuardedRoute path='/deposit' component={Deposit} exact/>
            <GuardedRoute path='/deposit/:id' component={Deposit} exact/>
            <GuardedRoute path='/balance' component={Wallet} />
            <GuardedRoute path='/settings' component={Settings}  />
            <Route component={NotFoundPage} />
            <Redirect to="/" />
  </Switch>
....
<Account>
        <Pages>
          <MetaTags></MetaTags>
          <ConnectivityListener></ConnectivityListener>
          <Router>
            <ScrollToTop />
            {routes}
          </Router>
        </Pages>
  </Account>

我的守护路线：

const GuardedRoute = ({ component: Component, ...rest }) => {
    const { isAuthenticated,isAuthenticatedAndVerified, userAttrs,isLoading,isLoading2 } = React.useContext(AccountContext);
    return (
        <Route
            {...rest}
            component={props => (
                !isLoading
                    ?
                    (
                        isAuthenticated 
                            ?(
                                !isLoading2?(
                                    isAuthenticatedAndVerified ? 
                                    <Component {...props} />
                                    : (userAttrs.phone_number!==undefined ?  <Redirect to={`/user/verify-code`} exact/> : <Redirect to={`/user/verification-form`} exact/>)
                                ) : ''
                               
                            )
                            :
                            <Redirect to={'/user/login'} exact/>
                    )
                    :
                   ''
            )}
        />
    )
}

export default GuardedRoute;

有什么建议吗？

【问题讨论】：

标签： javascript reactjs react-hooks react-router-dom

【解决方案1】：

那是因为你在 loadings 状态下没有做任何事情，


component={(props) =>
  !isLoading ? (
    isAuthenticated ? (
      !isLoading2 ? (
        isAuthenticatedAndVerified ? (
          <Component {...props} />
        ) : userAttrs.phone_number !== undefined ? (
          <Redirect to={`/user/verify-code`} exact />
        ) : (
          <Redirect to={`/user/verification-form`} exact />
        )
      ) : (
        "" // <==== HERE 
      )
    ) : (
      <Redirect to={"/user/login"} exact />
    )
  ) : (
    "" // <===== HERE
  )
}

因此您需要使用组件或某种 UI 更改那些 HERE 标记

你需要检查为什么你的loadings 状态没有改变

【讨论】：