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 functionLayoutin theapp/root.tsxI see only two footers, I don’t see<h1 className="text-3xl">My magic app</h1>. - When I deleted
<Footer />from the functionLayoutin theapp/root.tsxI 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 functionLayoutin theapp/root.tsxI see nothing on the page, internal<body>is empty.
0
First of all, the html code is strange.
Please start by writing why html was used in duplicate.
1
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>
);
}
I resolve the problem! So, there is no need to add and in the root.tsx. They will be place in the index page:
root.tsx:
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>
{children}
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return (
<Layout>
<Outlet />
</Layout>
);
}
_index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import Header from "../components/Header";
import Footer from "../components/Footer";
import Bridge from '../components/Bridge';
const Index = () => {
return (
<div className='wrap'>
<Header />
<Footer />
</div>
);
};
export default Index;