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

Question

I am using react-router-dom to navigate to different pages in my app with some protected routes related to authenticated users.

The issue is that sometimes the router renders a blank page that forces me to refresh the page to render again.

My App.js router:

 <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>

My Guard Route:

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;

any suggestions?

Answer 1

That's because you're not doing anything in your loadings state,

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

so you need to change those HERE marks with a component or some sort of UI

and you need to check why your loadings states don't change