Lenio Web Bootcamp

# React Router

React Router is a library for React that facilitates the creation of single-page applications (SPAs). It helps developers to define routes and links for navigation, and the router will manage the transition between views in a dynamic way.

# Installation

To use React Router, we first need to install it via NPM using the following command:

npm install react-router-dom

Then, we can import the React Router components we need in our root application component, remember to import from 'react-router-dom' to use it within your component:

import React from 'react';
import { Routes, Navigation, Route, Link } from 'react-router-dom';

# React Router Components

# Routes & Route

In React Router v6, routes are defined using the <Routes> component, and each individual route is represented by the <Route> component. Inside <Routes>, you can nest multiple <Route> components to define your application's routing structure.

Routes in v6 use a new matching algorithm based on the "first match wins" principle. The first matching route's element is rendered, and subsequent matching routes are ignored.

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<NotFound />} /> {/* Error path */}
    </Routes>
  );
}

In this example, we are using the exact attribute on the main route to guarantee that it is only displayed when the URL is precisely '/'. For the other routes, we simply list the route and the component to be rendered. Also the <Route> component with the path="*" will be rendered if none of the previous routes match the current URL. You can replace <NotFound /> with the component you want to render for the error path, such as a "Page Not Found" component.

To navigate between routes, you can use the <Link> component provided by React Router. It creates clickable links that update the URL and trigger the rendering of the corresponding route component.

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

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

Also React Router v6 introduces a new component called Navigate that can be used for programmatic navigation within your components. It provides an alternative approach to the useNavigate hook.

Here's an example of how to use the Navigate component:

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

function MyComponent() {
  const handleClick = () => {
    return <Navigate to="/about" replace />;
  };

  return (
    <div>
      <h1>Welcome to MyComponent</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

In the above example, when the button is clicked, the handleClick function is invoked, which returns a <Navigate> component with the desired route specified using the to prop ('/about' in this case). The replace prop, when set to true, replaces the current entry in the navigation history instead of adding a new entry.

The <Navigate> component can be used in various scenarios where you need to trigger navigation programmatically, such as handling form submissions, conditional navigation, or navigation based on certain application logic.

In summary, React Router is a powerful library for creating single-page applications with dynamic navigation. Arrow functions allow for more concise and readable code to be written, so we encourage you to use them. Through the use of this library, more sophisticated and user-friendly applications can be created.

Here (opens new window) you can access the official documentation, and for a more comprehensive understanding, you can follow this complete tutorial (opens new window) to delve deeper into the topic.

← Client Side Rendering →