Question

所以我面临的问题是这个。当我加载页面时，没有呈现 Header 组件的样式，但是当我删除加载逻辑时，它们是。问题可能出在 Header 组件 BCS 中，它位于除登录之外的每个路由中。我需要在除登录之外的每个路径上呈现它。错误可能在哪里？


  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

所以问题出在 CSS 上。 Header.css 中的样式需要在 App.css 中。不知道为什么

反应可加载问题

1 个答案: