перенаправление на компонент маршрута, не имея компонента заголовка и нижнего колонтитула

Question

У меня есть пример приложения: всякий раз, когда я загружаю корневой 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>

Answer 1

Полагаю, вы можете просто использовать следующие стили для вашего тега '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>

Div "Redirecting" получил высокий порядок стека с zIndex и другими необходимыми стилями, чтобы покрыть весь экран белым фоном; следовательно это должно показать перед всеми другими элементами вокруг. Кроме того, внешний "обертка" div с "position: относительный" требуется для его работы.

Надеюсь, это поможет.

Answer 2

Вам нужно обернуть <Header> и <Footer> в каждую из ваших страниц AboutUs, Contact и HomePage.

Нет другого способа условно отобразить <Header> и <Footer> на родительском уровне, если только вы не хотите поддерживать состояние на родительском уровне, которое контролирует, показывать ли верхний и нижний колонтитулы, что не является идеальным решением.

Просто оберните их в каждый из ваших компонентов - AboutUs, Contact и HomePage.