appjk

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { useState } from 'react';

const Home = () => (

<div> <h2>Welcome to Our Website!</h2> <img src="https://via.placeholder.com/150" alt="Welcome" /> <p>This is the Home Page.</p> </div> );

const Services = () => (

<div> <h2>Our Services</h2> <img src="https://via.placeholder.com/150" alt="Services" /> <p>Discover the services we offer.</p> </div> );

const Contact = () => (

<div> <h2>Contact Us</h2> <img src="https://via.placeholder.com/150" alt="Contact" /> <p>Feel free to reach out!</p> </div> );

function App() {
const [count, setCount] = useState(0);

const styles = {
main: {
padding: '20px',
},
title: {
color: '#4A90E2'
},
};

return (
<Router>
<div style={styles.main}>
<h1 style={styles.title}>React Routing Example</h1>
<nav>
<Link to="/">Home</Link> |
<Link to="/services">Services</Link> |
<Link to="/contact">Contact</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/services" element={<Services />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
}

export default App;