Welcome! We're stepping into the world of web applications where we'll interact with react-router-dom v6! This package furnishes expressive routing in a React.JS universe. By the end of this lesson, you'll have gleaned a solid understanding of React Router, the fundamentals of routing using react-router-dom v6, and the operation of the Link component.

Note: React Router v7 has been available and is the preferred version since December 2024. However, this course focuses on v6 as it remains widely used in existing applications. The concepts you learn here will still be valuable and largely transferable to v7.

First, we'll familiarize ourselves with the world of React Router, followed by an examination of the specifics of react-router-dom v6, the basics of routing, and concluding with the versatile Link component.

Embark on a journey into the city of applications where the Router serves as our GPS. It enables us to define paths leading to the various corners of our city, such as Pages or Components. When navigating to a specific path, the Router renders the appropriate component.

For example, if you were building a blog, '/submit' could direct you to the submission form, while '/help' might unveil a help page. We're merely scratching the surface of the possibilities!

Let's discuss the what's new in react-router-dom v6. It ushers in significant changes. We'll focus on the transition from using Switch to using Routes, and the influential shift from defining a 'component' to assigning an 'element'. We must guarantee that everything is cocooned within a BrowserRouter (or, more concisely, a Router).

Routing in a web application is like channel surfing on your television. When you choose a channel, you get the content for that path. In react-router-dom v6, we use BrowserRouter, Route, and Routes to implement routing.

The BrowserRouter wraps around your entire application and provides it with routing capabilities. Routes is a container for multiple Route. Each Route defines a different channel for your application, and each of these channels can show different content.

Here is a simple code snippet that shows how you can set up routing in your application:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contact" element={<ContactPage />} />
      </Routes>
    </Router>
  );
}

In this example, the path in a Route is equivalent to a URL. So if your website's URL is https://mysite.com/contact, then your Router will know to display the ContactPage. Respectively element={<HomePage />} is what to display when the user navigates to that path.

Now, let's define each of those routes' contents as separate components (or pages):

function HomePage() {
  return <h1>Welcome Home</h1>
}

function AboutPage() {
  return <h1>About Us</h1>
}

function ContactPage() {
  return <h1>Contact Us</h1>
}

They can be as simple or as complex as you need them to be!

This simple structure provides a skeleton for your application and allows for great freedom in shaping your app's navigation.