Scribd
Upload
31 views2 pages

WMAD

This document provides code examples for implementing routing and navigation in a React application using React Router. It includes a Login component, Index file setting up routes and navigation, About, Contact and Home components, and imports the necessary React Router packages. The routes are defined in Index.js to navigate between Home, About, Contact and Login pages.

Uploaded by

Harsh Gandhi
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
31 views2 pages

WMAD

This document provides code examples for implementing routing and navigation in a React application using React Router. It includes a Login component, Index file setting up routes and navigation, About, Contact and Home components, and imports the necessary React Router packages. The routes are defined in Index.js to navigate between Home, About, Contact and Login pages.

Uploaded by

Harsh Gandhi
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

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