#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;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter