Skip to content
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