You are on page 1of 2

Add "react-router-dom" in dependencies

----------------------------------------------------------------------
LOGIN.JS

fuction Login(){
return(
<div>
<form>
<input type="text" /></br>
<input type="password" /></br>
<input> </br>
</form>
</div>
);

export default Login;

---------------------------------------------------------------------

INDEX.JS

import React, { StrictMode } from 'react';


import { createRoot } from 'react-dom/client';
import App from './App';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import Home from './Home';
import About from './About';

const rootElement = document.getElementById('root');


const root = createRoot(rootElement);

root.render(
<BrowserRouter>
<Routes>
<Route path= "/" element={<Home />}>
<Route path = "about" Component={About} />
<Route path="contact" Component={Contact} />
<Route path="Login" Component={Login} />
</Route>
</Routes>
</BrowserRouter>

);

----------------------------------------------------------------------------

ABOUT.JS

function About(){
return <h1>ABOUT PAGE</h1>
}

export default About;

----------------------------------------------------------------------------

CONTACT.JS
function Contact(){
return <h1>CONTACT</h1>
}

export default Contact;

----------------------------------------------------------------------------

HOME.JS

import {Outlet, Link} from "react-router-dom";

function Home(){
return(
<div>
<ul>

<li> <Link to="/about">About</Link></li>


<li> <Link to="/contact">Contact</Link></li>
</ul>

<p>Your output will display below:</p>


<div> <Outlet /></div>
</div>

);
}

export default Home;

You might also like