14 a

#install

npm install react-router-dom
npm start


#app.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  const user = "Alice";

  return (
    <Router>
      <div>
        <h1>React Routing Example</h1>
        <nav>
          <Link to="/">Home</Link> |{" "}
          <Link to="/about">About</Link> |{" "}
          <Link to="/contact">Contact</Link>
        </nav>

        <Routes>
          <Route path="/" element={<Home user={user} />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact email="alice@example.com" />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

#home.js
import React from 'react';

function Home({ user }) {
  return (
    <div>
      <h2>Home</h2>
      <p>Welcome, {user}!</p>
    </div>
  );
}

export default Home;

#about.js

import React from 'react';

function About() {
  return (
    <div>
      <h2>About</h2>
      <p>This app demonstrates React Router for navigation.</p>
    </div>
  );
}

export default About;

#contact.js

import React from 'react';

function Contact({ email }) {
  return (
    <div>
      <h2>Contact</h2>
      <p>Contact us at: {email}</p>
    </div>
  );
}

export default Contact;