React Pages with Navbar
1. Project Structure
src/
├── App.js
├── components/
│ ├── Navbar.js
│ ├── Header.js
│ ├── Footer.js
│ └── MainContent.js
├── pages/
│ ├── Home.js
│ ├── About.js
│ └── Contact.js
└── index.js
2. App.js
This file sets up routing with the Navbar.
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
function App() {
return (
<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
export default App;
3. Navbar.js
The navigation component for linking to each page.
import React from 'react';
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
<nav style={styles.nav}>
<h2 style={styles.logo}>My Website</h2>
<ul style={styles.navLinks}>
<li><Link to="/" style={styles.link}>Home</Link></li>
<li><Link to="/about" style={styles.link}>About</Link></li>
<li><Link to="/contact" style={styles.link}>Contact</Link></li>
</ul>
</nav>
);
};
const styles = {
nav: { display: 'flex', justifyContent: 'space-between', padding: '10px 20px', backgroundColor: '#333',
color: '#fff' },
logo: { margin: 0 },
navLinks: { display: 'flex', listStyleType: 'none', margin: 0, padding: 0 },
link: { margin: '0 10px', color: '#fff', textDecoration: 'none' },
};
export default Navbar;
4. Header.js
A simple header component.
import React from 'react';
const Header = ({ title }) => (
<header style={styles.header}>
<h1>{title}</h1>
</header>
);
const styles = {
header: { padding: '20px', backgroundColor: '#f4f4f4', textAlign: 'center' },
};
export default Header;
5. Footer.js
A footer component for each page.
import React from 'react';
const Footer = () => (
<footer style={styles.footer}>
<p>© 2024 My Website. All rights reserved.</p>
</footer>
);
const styles = {
footer: { padding: '10px', backgroundColor: '#333', color: '#fff', textAlign: 'center', marginTop: '20px' },
};
export default Footer;
6. MainContent.js
A component for the main content area.
import React from 'react';
const MainContent = ({ content }) => (
<main style={styles.main}>
<p>{content}</p>
</main>
);
const styles = {
main: { padding: '20px' },
};
export default MainContent;
7. Home.js
The Home page, including Header, MainContent, and Footer.
import React from 'react';
import Header from '../components/Header';
import MainContent from '../components/MainContent';
import Footer from '../components/Footer';
const Home = () => (
<div>
<Header title="Welcome to the Home Page" />
<MainContent content="This is the home page of our website. We hope you enjoy your stay!" />
<Footer />
</div>
);
export default Home;
8. About.js
The About page, reusing the components with different content.
import React from 'react';
import Header from '../components/Header';
import MainContent from '../components/MainContent';
import Footer from '../components/Footer';
const About = () => (
<div>
<Header title="About Us" />
<MainContent content="Learn more about our company and mission." />
<Footer />
</div>
);
export default About;
9. Contact.js
The Contact page, also with Header, MainContent, and Footer.
import React from 'react';
import Header from '../components/Header';
import MainContent from '../components/MainContent';
import Footer from '../components/Footer';
const Contact = () => (
<div>
<Header title="Contact Us" />
<MainContent content="Feel free to reach out to us through the provided contact information." />
<Footer />
</div>
);
export default Contact;
