React loadable issues

Question

So the problem I am facing is this. When I load the page, the stylings of the Header component are not being rendered, but when I remove the load Logic they are. The problem might lie in Header component BCS it is in every Route except Login. I need it to be rendered on every path except Login. Where the error could be?

  const Cart = loadable(
    () =>
      new Promise((resolve, reject) =>
        setTimeout(() => resolve(import("./components/Cart/Cart")), 100)
      ),
    {
      fallback:  <div  className="login__loader">
      <img src='./audie/Glowing ring.gif' alt= ''></img>
     </div> 
    }
  );
     const Book = loadable(
    () =>
      new Promise((resolve, reject) =>
        setTimeout(() => resolve(import('./components/Home/Book')), 100)
      ),
    {
      fallback: <div>Loading...</div>
    }
  );
  


 
const App=()=> {
 


  return (
    <React.Fragment>
        <Switch>
        <Route exact path='/'>
         <Header />
         <Home />      
        </Route> 
        <Route path="/cart">
          <Header />
          <Cart /> 
        </Route> 
        <Route path="/stripecontainer">
          <Header />
          <StripeContainer /> 
        </Route>    
        <Route path='/book/:bookId'>
         <Header />
         <Book />      
        </Route>  
        <Route path='books'>
          <Books/>
        </Route>
        <Route path='/forgotpassword'>
       <ForgotPassword />
        </Route> 
        <Route path='/passwordreset/:resetToken'>
        <ResetPassword />
        </Route>       
       <Route exact path='/register'>
        <Register />
        </Route> 
        <Route path='/login'>
         <Login />
        </Route>  
        </Switch>
    </React.Fragment>
  );
}

export default App

Answer 1

So the problem was in CSS. Styles from Header.css needed to be in App.css. I don't know why