Skip to main content

Basic Routing: `Routes`, `Route`, and `Link` (Part 1) - The Core Components #91

📖 Introduction​

Following our deep dive into the <BrowserRouter> component, this article focuses on the core components that you will use to build the routing logic of your application: <Routes>, <Route>, and <Link>.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • All concepts from the previous articles in this series.
  • Basic React component creation.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The <Routes> Component: Its purpose and how it works.
  • ✅ The <Route> Component: How to define a single route with a path and an element.
  • ✅ The <Link> Component: How to create navigation links between your routes.

🧠 Section 1: The Core Components of React Router​

Let's take a closer look at the three core components you'll use to define your application's routing structure.

1.1 - <Routes>​

The <Routes> component is a container for all of your individual routes. It's responsible for looking at the current URL and rendering the first <Route> that matches. If no routes match, it will render nothing.

1.2 - <Route>​

The <Route> component is used to define a single route. It has two main props:

  • path: A string that defines the URL path for the route.
  • element: The React component to render when the URL matches the path.

1.3 - <Link>​

The <Link> component is used to create links to different routes. It's the React Router equivalent of an HTML <a> tag. The key difference is that <Link> prevents a full page reload, enabling a smoother user experience in a single-page application. It has a to prop that specifies the path to navigate to.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's see how these components work together in a practical example.

2.1 - Defining Your Routes​

First, let's define a few simple components to act as our pages.

// Home.js
import React from 'react';
const Home = () => <h1>Home</h1>;
export default Home;

// About.js
import React from 'react';
const About = () => <h1>About</h1>;
export default About;

// Contact.js
import React from 'react';
const Contact = () => <h1>Contact</h1>;
export default Contact;

Now, let's use the <Routes> and <Route> components in our App.js to define the routes for these pages.

// App.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

2.2 - Adding Navigation with <Link>​

Now, let's add a navigation menu to our App.js file so that users can navigate between the pages.

// App.js
import React from 'react';
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <hr />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

Now, when you run your application, you will see a navigation menu. Clicking on the links will change the URL in the browser and render the corresponding component without a full page refresh.

💡 Conclusion & Key Takeaways​

In this article, we've learned about the three core components of React Router: <Routes>, <Route>, and <Link>. We've seen how to use them together to create a basic routing structure and navigation menu for a React application.

Let's summarize the key takeaways:

  • <Routes> is a container for your routes.
  • <Route> defines a single route with a path and a component to render.
  • <Link> is used to create navigation links between your routes.

Challenge Yourself: To solidify your understanding, try to add a "Not Found" page that renders when a user navigates to a URL that doesn't match any of your routes. (Hint: you can use a path of * for this).

➡️ Next Steps​

You now have a solid understanding of the core components of React Router. In the next article, "Basic Routing: Routes, Route, and Link (Part 2)", we will build a more practical example of a navigation menu and explore some more advanced features of these components.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Route: A rule that maps a URL path to a specific component.
  • Link: A UI element that allows a user to navigate to a different route.

Further Reading​