intermediate
Setting Up Basic Routes in React
Learn how to set up basic routing in a React application using React Router. Create multiple routes and navigate between different pages.
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
// Page Components
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;
function App() {
return (
<__________...>
<nav>
<ul>
<li>
<____ to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<______>
<_____ path="/" element={<Home />} />
<_____ path="/about" element={<About />} />
<_____ path="/contact" element={<Contact />} />
</Routes>
</BrowserRouter>
);
}
export default App;0/6 filled tab moves · Ctrl+↵ submits · Ctrl+Shift+↵ runsstarter code