11.3. Navigating Between Pages

Introduction In this section, we’ll learn how to navigate between pages using React Router. Geek and Gal will guide you through the process, making it easy to understand for beginners and advanced users alike!

We've set up React Router, but how do we navigate between pages?

Yeah, I want to know how to switch pages easily!

No problem! Let's go through the process together! 😄

Step 1: Using the Link Component

To navigate between pages, we use the Link component from react-router-dom . It's like an anchor tag in HTML, but it's more powerful and works well with React Router!

Oh, so it's like a fancy <a> tag? Cool!

Step 2: Creating Navigation Links

Yup! Now, let's create some navigation links using the Link component. It's super easy! Just use the to prop to specify the path!

import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
  );
}

So simple! Just use the Link component with a to prop, and we're good to go!

That's right! Now you can easily navigate between pages in your app!

Step 3: Adding the Navigation Component

Finally, let's add our Navigation component to the app, and we're all set!

import Navigation from './Navigation';

function App() {
  return (
    <div>
      <Navigation />
      {/* ... other components and routes ... */}
    </div>
  );
}

This is amazing! We've created a navigation menu using the Link component, and now we can switch between pages!

You got it! Enjoy smooth navigation with React Router! 🚀

Conclusion Navigating between pages in a React app is simple with React Router! Just follow these steps: use the Link component to create navigation links, specify the paths using the to prop, and add the navigation component to your app. Now you can effortlessly switch between pages in your React apps! 😎