Scribd
Upload
7 views

React Pages With Router

Uploaded by

tanvirsultana352
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

React Pages With Router

Uploaded by

tanvirsultana352
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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>&copy; 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;

You might also like