Scribd
Upload
7 views

React Pages With Router

Uploaded by

tanvirsultana352
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

React Pages With Router

Uploaded by

tanvirsultana352
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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