Html Question posted in
Some basic documentation can be found here.

Html – Why I have twice headers and footers in my React app?

This is my very simple React app. I have no idea why it show me 2 copies of header and footer. All components of the page renders in the first <body> once more:

<html lang="en">
    <head></head>
    <body>
    <header>/* header content*/</header>
    <html lang="en">
        <head></head>
            <body>
                <header>/* header content*/</header>
                <h1>Welcome to the main page</h1>
                <footer>/* footer content*/</footer>
            </body>
    </html>**
    <footer>/* footer content*/</footer>
    </body>
</html>

I can’t understand why it happen. This is my code:

app/root.tsx:

import {
    Links,
    Meta,
    Outlet,
    Scripts,
    ScrollRestoration,
} from "@remix-run/react";

import Header from "./routes/components/Header"; 
import Footer from "./routes/components/Footer";

import "./tailwind.css";
import "./style.css";

export function Layout({ children }: { children: React.ReactNode }) {
    return (
        <html lang="en">
        <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <Meta />
            <Links />
        </head>
        <body>
            <Header />
            {children}
            <Footer />
            <ScrollRestoration />
            <Scripts />
        </body>
    </html>
    );
}

export default function App() {
    return (
        <Layout>
            <Outlet />
        </Layout>
    );
}

app/routes/_index.tsx:

import React from 'react';

const Index = () => {
    return (
        <div className='p-4'>
            <h1>Welcome to the main page</h1>   
        </div>
    );
};

export default Index;

app/routes/components/Header.tsx:

import React from 'react';

const Header: React.FC = () => {
    return (
        <header>
           <div className="p-4">
              <h1 className="text-3xl">My magic app</h1>
            </div>
        </header>
    );
};

export default Header;

app/routes/components/Footer.tsx:

import React from 'react';

const Footer: React.FC = () => {
    return (
        <footer>
            <p className="py-1 text-base sm:text-sm">© 2024, MadFox. All rights reserved.</p>
        </footer>
    );
};
export default Footer;

What is the problem?

  • When I deleted <Header /> from the function Layout in the app/root.tsx I see only two footers, I don’t see <h1 className="text-3xl">My magic app</h1>.
  • When I deleted <Footer /> from the function Layout in the app/root.tsx I see only two headers, I don’t see <h1 className="text-3xl">My magic app</h1>.
  • When I deleted both <Header /> and <Footer /> from the function Layout in the app/root.tsx I see nothing on the page, internal <body> is empty.
Tags:

2

Answers


  1. 0

    First of all, the html code is strange.

    Please start by writing why html was used in duplicate.
    Login or Signup to reply.
  2. 0

    Currently, your Layout component is rendering a complete html-document (<html>, <head>, and <body> tags).

    Usually, React will take care of these tags.

    Instead, you should wrap it in a fragment (<> </>) and avoid rendering the <html>, <head>, and <body> tags:

    app/root.tsx:

    import {
    Links,
    Meta,
    Outlet,
    Scripts,
    ScrollRestoration,
} from "@remix-run/react";

import Header from "./routes/components/Header"; 
import Footer from "./routes/components/Footer";

import "./tailwind.css";
import "./style.css";

export function Layout({ children }: { children: React.ReactNode }) {
    return (
        <>
            <Header />
            {children}
            <Footer />
            <ScrollRestoration />
            <Scripts />
        </>
    );
}

export default function App() {
    return (
        <Layout>
            <Outlet />
        </Layout>
    );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search