intermediate
Setting Up React Router Basic Navigation
Learn how to set up React Router and create basic navigation between pages in a React application.
import React from 'react';
import { __________..., Routes, Route, Link } from 'react-router-dom';
// Page Components
const Home = () => <div><h1>Home Page</h1><p>Welcome to our website!</p></div>;
const About = () => <div><h1>About Page</h1><p>Learn more about us.</p></div>;
const Contact = () => <div><h1>Contact Page</h1><p>Get in touch with us.</p></div>;
// Navigation Component
const Navigation = () => {
return (
<nav>
<ul>
<li>
<____ to="/">Home</____>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
);
};
// Main App Component
function App() {
return (
<BrowserRouter>
<div className="app">
<Navigation />
<______>
<_____ path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;0/5 filled tab moves · Ctrl+↵ submits · Ctrl+Shift+↵ runsstarter code