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