Reactjs 在路由组件上重定向，而不使用页眉和页脚组件

我有一个示例应用程序，每当我加载根url时，我都会检查cookie列表，如果cookie在那里，那么我就会加载主页组件，否则，我需要重定向到外部url

我可以重定向，但只要我重定向页眉和页脚组件就会出现。因为我在页眉和页脚之间调用路由组件。那么，如何仅显示文本重定向 没有页眉和页脚组件

   <BrowserRouter> 
    <Header />
    <div className="content">
       <Route path="/aboutus" component={AboutUs} />
       <Route path="/contact" component={Contact} />
       <Route path="/" render ={() => {
         // checking the cookie exists
         if(cookieExists){
           return (<HomePage />)
        }else{
        axios.get("api/userLoggedIn")
            .then(res => {
          // the url is an external url [https://www.examplelogin.com]
          window.location.assign(res.data);
        })
         .catch(err => console.log("error in api", err))
        return <div>Redirecting</div>;
        }
       }}
     />
    </div>
    <Footer />
    </BrowserRouter>

{
//检查cookie是否存在
如果（存在）{
返回（）
}否则{
get（“api/userLoggedIn”）
。然后（res=>{
//url是一个外部url[https://www.examplelogin.com]
窗口、位置、分配（资源数据）；
})
.catch（err=>console.log（“api中的错误”，err））
返回重定向；
}
}}
/>

您需要将

和

包装到您的每一页

关于我们

，

联系人

和

主页

没有其他方法可以有条件地在父级渲染

和

，除非您希望在父级维护一个控制是否显示页眉和页脚的状态，这不是理想的解决方案

---

只需将它们包装到您的每个组件中-

AboutUs

、

Contact

和

HomePage

，我想您可以在“div”标签上使用以下样式，如下所示：

const contact = {zIndex: 9999, backgroundColor: "#fff", top: 0, right: 0, left: 0, bottom: 0, position: "absolute"};
const wrapper = {position: "relative"}; 

<BrowserRouter>
  <div style={wrapper}>
    <Header />
    <div className="content">
       <Route path="/aboutus" component={AboutUs} />
       <Route path="/contact" component={Contact} />
       <Route path="/" render ={() => {
         // checking the cookie exists
         if (cookieExists){
           return (<HomePage />)
         } else {
           axios.get("api/userLoggedIn")
           .then(res => {
             // the url is an external url [https://www.examplelogin.com]
             window.location.assign(res.data);
           })
           .catch(err => console.log("error in api", err))
           return <div style={contact}>Redirecting</div>;
         }
       }}/>           
    </div>
  </div>
</BrowserRouter>

const contact={zIndex:9999，背景色：“#fff”，顶部：0，右侧：0，左侧：0，底部：0，位置：“绝对”}；
常量包装器={position:“relative”}；
{
//检查cookie是否存在
如果（存在）{
返回（）
}否则{
get（“api/userLoggedIn”）
。然后（res=>{
//url是一个外部url[https://www.examplelogin.com]
窗口、位置、分配（资源数据）；
})
.catch（err=>console.log（“api中的错误”，err））
返回重定向；
}
}}/>           

“重定向”div被赋予了zIndex的高堆栈顺序，以及用白色背景覆盖整个屏幕的其他必要样式；因此，它应该显示在周围所有其他元素的前面。此外，需要一个带有“position:relative”的外部“wrapper”div使其工作

---

希望这有帮助。

因此，我们没有解决方案。