重定向路由组件，没有页眉和页脚组件 [英] redirecting on route component , without having the header and footer component

问题描述

我有一个示例应用程序，每当我加载根 url 时，我都会检查 cookie presist 是否存在，如果存在 cookie，则我加载其他主页组件，我需要重定向到外部 url.

我可以重定向，但是每当我重定向时，页眉和页脚组件都会出现.因为我在页眉和页脚之间调用路由组件.那么我怎样才能只显示文本 Redirecting没有页眉和页脚组件

 <标题/><div className="内容"><Route path="/aboutus" component={AboutUs}/><Route path="/contact" component={Contact}/><Route path="/" render ={() =>{//检查cookie是否存在如果(cookieExists){返回(<主页/>)}别的{axios.get("api/userLoggedIn").then(res => {//url 是外部 url [https://www.examplelogin.com]window.location.assign(res.data);}).catch(err => console.log("api 中的错误", err))返回<div>重定向</div>;}}}/>

<页脚/></BrowserRouter>

解决方案

我想你可以在你的 'div' 标签上使用以下样式，就像这样:

const contact = {zIndex: 9999, backgroundColor: "#fff", top: 0, right: 0, left: 0, bottom: 0, position: "absolute"};const 包装器 = {位置:相对"}；<浏览器路由器><div style={wrapper}><标题/><div className="内容"><Route path="/aboutus" component={AboutUs}/><Route path="/contact" component={Contact}/><Route path="/" render ={() =>{//检查cookie是否存在如果(cookieExists){返回(<主页/>)} 别的 {axios.get("api/userLoggedIn").then(res => {//url 是外部 url [https://www.examplelogin.com]window.location.assign(res.data);}).catch(err => console.log("api 中的错误", err))return <div style={contact}>重定向</div>;}}}/>

</BrowserRouter>

重定向"div 已经被赋予了高堆栈顺序和 zIndex，以及其他必要的样式，以用白色背景覆盖整个屏幕；因此它应该显示在周围所有其他元素的前面.此外，需要一个带有位置:相对"的外部包装器"div 才能使其工作.

希望这会有所帮助.

i have a sample application , whenever i am loading the root url i am checking the cookie presist or not , if cookie is there then i load the home page component else , i need redirect to an external url.

I am able to redirect but whenever i am redirecting the header and footer component shows up. Since i am calling the route component in between header and footer. So how can i show only the text Redirecting without Header and Footer component

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

解决方案

I suppose you can just use the following styles on your 'div' tag, something like this:

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>

The "Redirecting" div has been given a high stack order with zIndex, and other necessary styles to cover the whole screen with a white background; hence it should show in front of all other elements around. Also, an outer "wrapper" div with "position: relative" is required to make it work.

Hope this helps.

这篇关于重定向路由组件，没有页眉和页脚组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！