Scribd
Upload
3 views2 pages

Routing

Uploaded by

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

Routing

Uploaded by

xaheti3494
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Routing:

import React from 'react';


import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

// Home Component
const Home = () => {
return <div style={{ backgroundColor: 'lightblue', height: '100vh' }}>Welcome to
Home Page</div>;
};

// Projects Component
const Projects = () => {
return <div style={{ backgroundColor: 'lightgreen', height: '100vh' }}>Welcome to
Projects Page</div>;
};

// Contact Component
const Contact = () => {
return <div style={{ backgroundColor: 'lightcoral', height: '100vh' }}>Welcome to
Contact Page</div>;
};

// Navigation Bar Component


const Navbar = () => {
return (
<nav style={{ backgroundColor: '#333', padding: '10px' }}>
<Link to="/" style={styles.link}>Home</Link>
<Link to="/projects" style={styles.link}>Projects</Link>
<Link to="/contact" style={styles.link}>Contact</Link>
</nav>
);
};

// Styles for the links


const styles = {
link: {
color: 'white',
padding: '10px',
textDecoration: 'none',
margin: '0 10px',
},
};

// App Component
const App = () => {
return (
<Router>
<Navbar />
<Switch>
<Route path="/" exact component={Home} />
<Route path="/projects" component={Projects} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
};
ReactDOM.render(<App />, document.getElementById('root'));

You might also like