A Newbie’s Information — SitePoint

React Router is the de facto customary routing library for React. When it’s essential navigate by means of a React software with a number of views, you’ll want a router to handle the URLs. React Router takes care of that, protecting your software UI and the URL in sync.

This tutorial introduces you to React Router v6 and an entire lot of issues you are able to do with it.

Introduction

React is a well-liked JavaScript library for constructing interactive net purposes that may ship dynamic content material. Such purposes might need a number of views (aka pages), however not like standard multi-page apps, navigating by means of these views shouldn’t lead to all the web page being reloaded. As an alternative, views are rendered inline throughout the present web page.

The tip person, who’s accustomed to multi-page apps, expects the next options to be current:

• Every view ought to have a URL that uniquely specifies that view. That is in order that the person can bookmark the URL for reference at a later time — for instance, www.instance.com/merchandise.
• The browser’s again and ahead button ought to work as anticipated.
• Dynamically generated nested views ought to ideally have a URL of their very own too — similar to instance.com/merchandise/sneakers/101, the place 101 is the product ID.

Routing is the method of protecting the browser URL in sync with what’s being rendered on the web page. React Router helps you to deal with routing declaratively. The declarative routing method lets you management the information circulate in your software, by saying “the route ought to seem like this”:

<Route path="/about" component={<About />} />

You may place your <Route> part anyplace you need your path to be rendered. Since <Route>, <Hyperlink> and all the opposite APIs that we’ll be coping with are simply elements, you’ll be able to simply stand up and working with routing in React.

Word: there’s a typical false impression that React Router is an official routing answer developed by Fb. In actuality, it’s a third-party library that’s developed and maintained by Remix Software program.

Overview

This tutorial is split into completely different sections. First, we’ll arrange React and React Router utilizing npm. Then we’ll bounce proper into some fundamentals. You’ll discover completely different code demonstrations of React Router in motion. The examples coated on this tutorial embrace:

• primary navigational routing
• nested routing
• nested routing with path parameters
• protected routing

All of the ideas linked with constructing these routes will probably be mentioned alongside the way in which.

All the code for the undertaking is offered on this GitHub repo.

Let’s get began!

Organising React Router

To observe together with this tutorial, you’ll want a latest model of Node put in in your PC. If this isn’t the case, then head over to the Node residence web page and obtain the proper binaries on your system. Alternatively, you would possibly think about using a model supervisor to put in Node. We now have a tutorial on utilizing a model supervisor right here.

Node comes bundled with npm, a bundle supervisor for JavaScript, with which we’re going to put in a number of the libraries we’ll be utilizing. You may be taught extra about utilizing npm right here.

You may verify that each are put in accurately by issuing the next instructions from the command line:

node -v
> 20.9.0

npm -v
> 10.1.0

With that carried out, let’s begin off by creating a brand new React undertaking with the Create React App software. You may both set up this globally, or use npx, like so:

npx create-react-app react-router-demo

When this has completed, turn into the newly created listing:

cd react-router-demo

The library includes three packages: react-router, react-router-dom, and react-router-native. The core bundle for the router is react-router, whereas the opposite two are setting particular. It’s best to use react-router-dom for those who’re constructing an internet software, and react-router-native for those who’re in a cell app growth setting utilizing React Native.

Use npm to put in react-router-dom bundle:

npm set up react-router-dom

Then begin the event server with this:

npm run begin

Congratulations! You now have a working React app with React Router put in. You may view the app working at http://localhost:3000/.

React Router Fundamentals

Now let’s familiarize ourselves with a primary setup. To do that, we’ll make an app with three separate views: House, Class and Merchandise.

The Router Element

The very first thing we’ll have to do is to wrap our <App> part in a <Router> part (offered by React Router). There are a number of sorts of router accessible, however in our case, there are two which benefit consideration:

The first distinction between them is obvious within the URLs they create:

https://instance.com/about


https://instance.com/#/about

The <BrowserRouter> is usually used because it leverages the HTML5 Historical past API to synchronize your UI with the URL, providing a cleaner URL construction with out hash fragments. Alternatively, the <HashRouter> makes use of the hash portion of the URL (window.location.hash) to handle routing, which will be helpful in environments the place server configuration just isn’t potential or when supporting legacy browsers missing HTML5 Historical past API help. You may learn extra in regards to the variations right here.

Word additionally that 4 new routers, which help varied new information APIs, have been launched in a latest model of React Router (v6.4). On this tutorial, we’ll deal with the standard routers, as they’re sturdy, nicely documented and utilized in a myriad of tasks throughout the web. We’ll, nevertheless, dive into what’s new in v6.4 in a later part.

So, let’s import the <BrowserRouter> part and wrap it across the <App> part. Change index.js to seem like this:

import React from 'react';
import ReactDOM from 'react-dom/consumer';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(doc.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

This code creates a historical past occasion for our total <App> part. Let’s have a look at what meaning.

A Little Little bit of Historical past

The historical past library helps you to simply handle session historical past anyplace JavaScript runs. A historical past object abstracts away the variations in varied environments and supplies a minimal API that allows you to handle the historical past stack, navigate, and persist state between classes. — remix-run

Every <Router> part creates a historical past object that retains observe of the present and former areas in a stack. When the present location adjustments, the view is re-rendered and also you get a way of navigation.

How does the present location change? In React Router v6, the useNavigate hook supplies a navigate operate that can be utilized for this goal. The navigate operate is invoked whenever you click on on a <Hyperlink> part, and it may also be used to switch the present location by passing an choices object with a change: true property.

Different strategies — similar to navigate(-1) for going again and navigate(1) for going ahead — are used to navigate by means of the historical past stack by going again or ahead a web page.

Apps don’t have to create their very own historical past objects; this activity is managed by the <Router> part. In a nutshell, it creates a historical past object, subscribes to adjustments within the stack, and modifies its state when the URL adjustments. This triggers a re-render of the app, guaranteeing the suitable UI is displayed.

Shifting on, now we have Hyperlinks and Routes.

Hyperlink and Route Parts

The <Route> part is an important part in React Router. It renders some UI if the situation matches the present route path. Ideally, a <Route> part ought to have a prop named path, and if the trail identify matches the present location, it will get rendered.

The <Hyperlink> part, then again, is used to navigate between pages. It’s akin to the HTML anchor component. Nonetheless, utilizing anchor hyperlinks would lead to a full web page refresh, which we don’t need. So as an alternative, we are able to use <Hyperlink> to navigate to a selected URL and have the view re-rendered and not using a refresh.

Now we’ve coated every little thing it’s essential make our app work. Delete all information other than index.js and App.js from the undertaking’s src folder, then replace App.js as follows:

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

const House = () => (
  <div>
    <h2>House</h2>
    <p>Welcome to our homepage!</p>
  </div>
);

const Classes = () => (
  <div>
    <h2>Classes</h2>
    <p>Browse objects by class.</p>
  </div>
);

const Merchandise = () => (
  <div>
    <h2>Merchandise</h2>
    <p>Browse particular person merchandise.</p>
  </div>
);

export default operate App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Hyperlink to="/">House</Hyperlink>
          </li>
          <li>
            <Hyperlink to="/classes">Classes</Hyperlink>
          </li>
          <li>
            <Hyperlink to="/merchandise">Merchandise</Hyperlink>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" component={<House />} />
        <Route path="/classes" component={<Classes />} />
        <Route path="/merchandise" component={<Merchandise />} />
      </Routes>
    </div>
  );
}

Right here, we’ve declared three elements — <House>, <Classes>, and <Merchandise> — which signify completely different pages in our software. The <Routes> and <Route> elements imported from React Router are utilized to outline the routing logic.

Within the <App> part now we have a primary navigation menu, the place every merchandise is a <Hyperlink> part from React Router. The <Hyperlink> elements are used to create navigable hyperlinks to completely different elements of the applying, every related to a particular path (/, /classes and /merchandise respectively). Word that in a bigger app, this menu might be encapsulated inside a structure part to keep up a constant construction throughout completely different views. You may also need to add some type of energetic class (similar to utilizing a NavLink part) to the presently chosen nav merchandise. Nonetheless, to maintain issues focussed, we’ll skip this right here.

Under the navigation menu, the <Routes> part is used as a container for a set of particular person <Route> elements. Every <Route> part is related to a particular path and a React part to render when the trail matches the present URL. For instance, when the URL is /classes, the <Classes> part is rendered.

Word: in earlier variations of React Router, / would match each / and /classes, which means that each elements have been rendered. The answer to this is able to have been to move the actual prop to the <Route>, guaranteeing that solely the precise path was matched. This conduct modified in v6, in order that now all paths match precisely by default. As we’ll see within the subsequent part, if you wish to match extra of the URL as a result of you’ve little one routes, use a trailing * — similar to <Route path="classes/*" ...>.

When you’re following alongside, earlier than continuing, take a second to click on across the app and ensure every little thing behaves as anticipated.

Nested Routing

Prime-level routes are all nicely and good, however earlier than lengthy most purposes will want to have the ability to nest routes — for instance, to show a selected product, or to edit a particular person.

In React Router v6, routes are nested by putting <Route> elements inside different <Route> elements within the JSX code. This manner, the nested <Route> elements naturally mirror the nested construction of the URLs they signify.

Let’s have a look at how we are able to implement this in our app. Change App.js, like so (the place ... signifies that the earlier code stays unchanged):

import { Hyperlink, Route, Routes } from 'react-router-dom';
import { Classes, Desktops, Laptops } from './Classes';

const House = () => ( ... );
const Merchandise = () => ( ... );

export default operate App() {
  return (
    <div>
      <nav>...</nav>

      <Routes>
        <Route path="/" component={<House />} />
        <Route path="/classes/" component={<Classes />}>
          <Route path="desktops" component={<Desktops />} />
          <Route path="laptops" component={<Laptops />} />
        </Route>
        <Route path="/merchandise" component={<Merchandise />} />
      </Routes>
    </div>
  );
}

As you’ll be able to see, we’ve moved the <Classes> part into its personal web page and at the moment are importing two additional elements, specifically <Desktops> and <Laptops>.

We’ve additionally made some adjustments to the <Routes> part, which we’ll have a look at in a second.

First, create a Classes.js file in the identical folder as your App.js file. Then add the next code:

import { Hyperlink, Outlet } from 'react-router-dom';

export const Classes = () => (
  <div>
    <h2>Classes</h2>
    <p>Browse objects by class.</p>
    <nav>
      <ul>
        <li>
          <Hyperlink to="desktops">Desktops</Hyperlink>
        </li>
        <li>
          <Hyperlink to="laptops">Laptops</Hyperlink>
        </li>
      </ul>
    </nav>

    <Outlet />
  </div>
);

export const Desktops = () => <h3>Desktop PC Web page</h3>;
export const Laptops = () => <h3>Laptops Web page</h3>;

Refresh your app (this could occur robotically if the dev server is working) after which click on on the Classes hyperlink. It’s best to now see two new menu factors (Desktops and Laptops) and clicking on both one will show a brand new web page inside the unique Classes web page.

So what did we simply do?

In App.js we modified our /classes path to seem like this:

<Route path="/classes/" component={<Classes />}>
  <Route path="desktops" component={<Desktops />} />
  <Route path="laptops" component={<Laptops />} />
</Route>

Within the up to date code, the <Route> part for /classes has been modified to incorporate two nested <Route> elements inside it — one for /classes/desktops and one other for /classes/laptops. This modification illustrates how React Router permits for composability with its routing configuration.

By nesting <Route> elements throughout the /classes <Route>, we’re capable of create a extra structured URL and UI hierarchy. This manner, when a person navigates to /classes/desktops or /classes/laptops, the respective <Desktops> or <Laptops> part will probably be rendered throughout the <Classes> part, showcasing a transparent mother or father–little one relationship between the routes and elements.

Word: the trail of a nested route is robotically composed by concatenating the paths of its ancestors with its personal path.

We’ve additionally altered our <Classes> part to incorporate an <Outlet />:

export const Classes = () => (
  <div>
    <h2>Classes</h2>
    ...
    <Outlet />
  </div>
);

An <Outlet> is positioned in mother or father route parts to render their little one route parts. This permits nested UI to point out up when little one routes are rendered.

This compositional method makes the routing configuration extra declarative and simpler to know, aligning nicely with React’s component-based structure.

Accessing Router Properties with Hooks

In earlier variations, sure props have been handed implicitly to a part. For instance:

const House = (props) => {
  console.log(props);
  return ( <h2>House</h2> );
};

The code above would log the next:

{
  historical past: { ... },
  location: { ... },
  match: { ... }
}

In React Router model 6, the method to passing router props has shifted to offer a extra express and hook-based technique. The router props historical past, location, and match are not handed implicitly to a part. As an alternative, a set of hooks are offered to entry this data.

For example, to entry the location object, you’ll use the useLocation hook. The useMatch hook returns match information a couple of route on the given path. The historical past object is not explicitly surfaced, quite the useNavigate hook will return a operate that allows you to navigate programmatically.

There are a lot of extra hooks to discover and quite than checklist all of them right here, I’d encourage you to take a look at the official documentation, the place accessible hooks will be discovered within the sidebar on the left.

Subsequent, let’s have a look at a kind of hooks in additional element and make our earlier instance extra dynamic.

Nested Dynamic Routing

To start out with, change the routes in App.js, like so:

<Routes>
  <Route path="/" component={<House />} />
  <Route path="/classes/" component={<Classes />}>
    <Route path="desktops" component={<Desktops />} />
    <Route path="laptops" component={<Laptops />} />
  </Route>
  <Route path="/merchandise/*" component={<Merchandise />} />
</Routes>

The eagle-eyed amongst you’ll spot that there’s now a trailing /* on the /merchandise route. In React Router model 6, the /* is a strategy to point out that the <Merchandise> part can have little one routes, and it’s a placeholder for any further path segments that may observe /merchandise within the URL. This manner, whenever you navigate to a URL like /merchandise/laptops, the <Merchandise> part will nonetheless be matched and rendered, and will probably be capable of additional course of the laptops a part of the trail utilizing its personal nested <Route> parts.

Subsequent, let’s transfer the <Merchandise> part into its personal file:

...
import Merchandise from './Merchandise';

const House = () => ( ... );

export default operate App() { ... }

Lastly, create a Merchandise.js file and add the next code:

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

const Merchandise = () => {
  const { identify } = useParams();

  return (
    <div>
      <h3>{identify}</h3>
      <p>Product particulars for the {identify}</p>
    </div>
  );
};

const Merchandise = () => (
  <div>
    <h2>Merchandise</h2>
    <p>Browse particular person merchandise.</p>
    <nav>
      <ul>
        <li>
          <Hyperlink to="dell-optiplex-3900">Dell OptiPlex 3090</Hyperlink>
        </li>
        <li>
          <Hyperlink to="lenovo-thinkpad-x1">Lenovo ThinkPad X1</Hyperlink>
        </li>
      </ul>
    </nav>

    <Routes>
      <Route path=":identify" component={<Merchandise />} />
    </Routes>
  </div>
);

export default Merchandise;

Right here we’ve added a <Route> to an <Merchandise> part (declared on the high of the web page). The route’s path is ready to :identify, which can match any path section following its mother or father route and move that section as a parameter named identify to the <Merchandise> part.

Within the <Merchandise> part, we’re utilizing the useParams hook. This returns an object of key/worth pairs of the dynamic params from the present URL. If we have been to log it to the console for the route /merchandise/laptops, we might see:

Object { "*": "laptops", identify: "laptops" }

We will then use object destructuring to seize this parameter straight, after which render it inside an <h3> tag.

Strive it out! As you’ll see, the <Merchandise> part catches any hyperlinks you declare in your nav bar and creates a web page dynamically.

You too can strive including some extra menu objects:

<li>
  <Hyperlink to="cyberpowerpc-gamer-xtreme">CyberPowerPC Gamer Xtreme</Hyperlink>
</li>

Our app will take these new pages into consideration.

This technique of capturing dynamic segments of the URL and utilizing them as parameters inside our elements permits for extra versatile routing and part rendering primarily based on the URL construction.

Let’s construct on this within the subsequent part.

Nested Routing with Path Parameters

In a real-world app, a router must cope with information and show it dynamically. Let’s assume now we have some product information returned by an API within the following format:

const productData = [
  {
    id: 1,
    name: "Dell OptiPlex 3090",
    description:
      "The Dell OptiPlex 3090 is a compact desktop PC that offers versatile features to meet your business needs.",
    status: "Available",
  },
  {
    id: 2,
    name: "Lenovo ThinkPad X1 Carbon",
    description:
      "Designed with a sleek and durable build, the Lenovo ThinkPad X1 Carbon is a high-performance laptop ideal for on-the-go professionals.",
    status: "Out of Stock",
  },
  {
    id: 3,
    name: "CyberPowerPC Gamer Xtreme",
    description:
      "The CyberPowerPC Gamer Xtreme is a high-performance gaming desktop with powerful processing and graphics capabilities for a seamless gaming experience.",
    status: "Available",
  },
  {
    id: 4,
    name: "Apple MacBook Air",
    description:
      "The Apple MacBook Air is a lightweight and compact laptop with a high-resolution Retina display and powerful processing capabilities.",
    status: "Out of Stock",
  },
];

Let’s additionally assume that we want routes for the next paths:

• /merchandise: this could show an inventory of merchandise.
• /merchandise/:productId: if a product with the :productId exists, it ought to show the product information, and if not, it ought to show an error message.

Exchange the present contents of Merchandise.js with the next (ensuring to repeat within the product information from above):

import { Hyperlink, Route, Routes } from "react-router-dom";
import Product from "./Product";

const productData = [ ... ];

const Merchandise = () => {
  const linkList = productData.map((product) => {
    return (
      <li key={product.id}>
        <Hyperlink to={`${product.id}`}>{product.identify}</Hyperlink>
      </li>
    );
  });

  return (
    <div>
      <h3>Merchandise</h3>
      <p>Browse particular person merchandise.</p>
      <ul>{linkList}</ul>

      <Routes>
        <Route path=":productId" component={<Product information={productData} />} />
        <Route index component={<p>Please choose a product.</p>} />
      </Routes>
    </div>
  );
};

export default Merchandise;

Contained in the part, we construct an inventory of <Hyperlink> elements utilizing the id property from every of our merchandise. We retailer this in a linkList variable, earlier than rendering it out to the web page.

Subsequent come two <Route> elements. The primary has a path prop with the worth :productId, which (as we noticed beforehand) is a route parameter. This permits us to seize and use the worth from the URL at this section as productId. The component prop of this <Route> part is ready to render a <Product> part, passing it the productData array as a prop. Each time the URL matches the sample, this <Product> part will probably be rendered, with the respective productId captured from the URL.

The second <Route> part makes use of an index prop to render the textual content “Please choose a product” every time the URL matches the bottom path precisely. The index prop signifies that this route is the bottom or “index” route inside this <Routes> setup. So, when the URL matches the bottom path — that’s, /merchandise — this message will probably be displayed.

Now, right here’s the code for the <Product> part we referenced above. You’ll have to create this file at src/Product.js:

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

const Product = ({ information }) => {
  const { productId } = useParams();
  const product = information.discover((p) => p.id === Quantity(productId));

  return (
    <div>
      {product ? (
        <div>
          <h3> {product.identify} </h3>
          <p>{product.description}</p>
          <hr />
          <h4>{product.standing}</h4>
        </div>
      ) : (
        <h2>Sorry. Product does not exist.</h2>
      )}
    </div>
  );
};

export default Product;

Right here we’re making use of the useParams hook to entry the dynamic elements of the URL path as key/worth pairs. Once more, we’re utilizing destructuring to seize the information we’re enthusiastic about (the productId).

The discover technique is getting used on the information array to seek for and return the primary component whose id property matches the productId retrieved from the URL parameters.

Now whenever you go to the applying within the browser and choose Merchandise, you’ll see a submenu rendered, which in flip shows the product information.

Earlier than transferring on, have a mess around with the demo. Guarantee your self that every little thing works and that you simply perceive what’s taking place within the code.

Defending Routes

A typical requirement for a lot of trendy net apps is to make sure that solely logged-in customers can entry sure elements of the location. On this subsequent part, we’ll have a look at easy methods to implement a protected route, in order that if somebody tries to entry /admin, they’ll be required to log in.

Nonetheless, there are a few facets of React Router that we have to cowl first.

Navigating Programmatically in React Router v6

In model 6, programmatically redirecting to a brand new location is achieved by means of the useNavigate hook. This hook supplies a operate that can be utilized to programmatically navigate to a special route. It will probably settle for an object as a second parameter, used to specify varied choices. For instance:

const navigate = useNavigate();
navigate('/login', {
  state: { from: location },
  change: true
});

It will redirect the person to /login, passing alongside a location worth to retailer in historical past state, which we are able to then entry on the vacation spot route by way of a useLocation hook. Specifying change: true will even change the present entry within the historical past stack quite than including a brand new one. This mimics the conduct of the now defunct <Redirect> part in v5.

To summarize: if somebody tries to entry the /admin route whereas logged out, they’ll be redirected to the /login route. The details about the present location is handed by way of the state prop, in order that if the authentication is profitable, the person will be redirected again to the web page they have been initially attempting to entry.

Customized Routes

The subsequent factor we have to have a look at are customized routes. A customized route in React Router is a user-defined part that enables for extra performance or behaviors throughout the routing course of. It will probably encapsulate particular routing logic, similar to authentication checks, and render completely different elements or carry out actions primarily based on sure situations.

Create a brand new file PrivateRoute.js within the src listing and add the next content material:

import { useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { fakeAuth } from './Login';

const PrivateRoute = ({ kids }) => {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    if (!fakeAuth.isAuthenticated) {
      navigate('/login', {
        state: { from: location },
        change: true,
      });
    }
  }, [navigate, location]);

  return fakeAuth.isAuthenticated ? kids : null;
};

export default PrivateRoute;

There are a number of issues occurring right here. To begin with, we import one thing referred to as fakeAuth, which exposes an isAuthenticated property. We’ll have a look at this in additional element quickly, however for now it’s ample to know that that is what we’ll use to find out the person’s logged-in standing.

The part accepts a kids prop. This would be the protected content material that the <PrivateRoute> part is wrapped round when it’s referred to as. For instance:

<PrivateRoute>
  <Admin /> <-- kids
</PrivateRoute>

Within the part physique, the useNavigate and useLocation hooks are used to acquire the navigate operate and the present location object respectively. If the person isn’t authenticated, as checked by !fakeAuth.isAuthenticated, the navigate operate is known as to redirect the person to the /login route, as described within the earlier part.

The part’s return assertion checks the authentication standing once more. If the person is authenticated, its little one elements are rendered. If the person isn’t authenticated, null is returned, rendering nothing.

Word additionally that we’re wrapping the decision to navigate in React’s useEffect hook. It’s because the navigate operate shouldn’t be referred to as straight contained in the part physique, because it causes a state replace throughout rendering. Wrapping it inside a useEffect hook ensures that it’s referred to as after the part is rendered.

Necessary Safety Discover

In a real-world app, it’s essential validate any request for a protected useful resource in your server. Let me say that once more…

In a real-world app, it’s essential validate any request for a protected useful resource in your server.

It’s because something that runs on the consumer can probably be reverse engineered and tampered with. For instance, within the above code one can simply open React’s dev instruments and alter the worth of isAuthenticated to true, thus having access to the protected space.

Authentication in a React app is worthy of a tutorial of its personal, however one strategy to implement it might be utilizing JSON Net Tokens. For instance, you can have an endpoint in your server which accepts a username and password mixture. When it receives these (by way of Ajax), it checks to see if the credentials are legitimate. In that case, it responds with a JWT, which the React app saves (for instance, in sessionStorage), and if not, it sends a 401 Unauthorized response again to the consumer.

Assuming a profitable login, the consumer would then ship the JWT as a header together with any request for a protected useful resource. This is able to then be validated by the server earlier than it despatched a response.

When storing passwords, the server wouldn’t retailer them in plaintext. Quite, it might encrypt them — for instance, utilizing bcryptjs.

Implementing the Protected Route

Now let’s implement our protected route. Alter App.js like so:

import { Hyperlink, Route, Routes } from 'react-router-dom';
import { Classes, Desktops, Laptops } from './Classes';
import Merchandise from './Merchandise';
import Login from './Login';
import PrivateRoute from './PrivateRoute';

const House = () => (
  <div>
    <h2>House</h2>
    <p>Welcome to our homepage!</p>
  </div>
);

const Admin = () => (
  <div>
    <h2>Welcome admin!</h2>
  </div>
);

export default operate App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Hyperlink to="/">House</Hyperlink>
          </li>
          <li>
            <Hyperlink to="/classes">Classes</Hyperlink>
          </li>
          <li>
            <Hyperlink to="/merchandise">Merchandise</Hyperlink>
          </li>
          <li>
            <Hyperlink to="/admin">Admin space</Hyperlink>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" component={<House />} />
        <Route path="/classes/" component={<Classes />}>
          <Route path="desktops" component={<Desktops />} />
          <Route path="laptops" component={<Laptops />} />
        </Route>
        <Route path="/merchandise/*" component={<Merchandise />} />
        <Route path="/login" component={<Login />} />
        <Route
          path="/admin"
          component={
            <PrivateRoute>
              <Admin />
            </PrivateRoute>
          }
        />
      </Routes>
    </div>
  );
}

As you’ll be able to see, we’ve added an <Admin> part to the highest of the file, and we’re together with our <PrivateRoute> throughout the <Routes> part. As talked about beforehand, this tradition route renders the <Admin> part if the person is logged in. In any other case, the person is redirected to /login.

Lastly, create Login.js and add the next code:

import { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';

export default operate Login() {
  const navigate = useNavigate();
  const { state } = useLocation();
  const from = state?.from || { pathname: "https://www.sitepoint.com/" };
  const [redirectToReferrer, setRedirectToReferrer] = useState(false);

  const login = () => {
    fakeAuth.authenticate(() => {
      setRedirectToReferrer(true);
    });
  };

  useEffect(() => {
    if (redirectToReferrer) {
      navigate(from.pathname, { change: true });
    }
  }, [redirectToReferrer, navigate, from.pathname]);

  return (
    <div>
      <p>It's essential to log in to view the web page at {from.pathname}</p>
      <button onClick={login}>Log in</button>
    </div>
  );
}


export const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true;
    setTimeout(cb, 100);
  },
};

Within the code above, we’re trying to get a price for the URL the person was attempting to entry earlier than being requested to log in. If this isn’t current, we set it to { pathname: "https://www.sitepoint.com/" }.

We then use React’s useState hook to initialize a redirectToReferrer property to false. Relying on the worth of this property, the person is both redirected to the place they have been going (that’s, the person is logged in), or the person is introduced with a button to log them in.

As soon as the button is clicked, the fakeAuth.authenticate technique is executed, which units fakeAuth.isAuthenticated to true and (in a callback operate) updates the worth of redirectToReferrer to true. This causes the part to re-render and the person to be redirected.

Working Demo

Let’s match the puzzle items collectively, lets? Right here’s the ultimate demo of the applying we constructed utilizing React router.

React Router Model 6.4

Earlier than we end up, we must always point out the discharge of React Router v6.4. Regardless of wanting like an not easily seen level launch, this model launched some groundbreaking new options. For instance, it now contains the information loading and mutation APIs from Remix, which introduce an entire new paradigm for protecting the UI in sync together with your information.

As of model 6.4, you’ll be able to outline a loader operate for every route, which is answerable for fetching the information wanted for that route. Inside your part, you employ the useLoaderData hook to entry the information that was loaded by your loader operate. When a person navigates to a route, React Router robotically calls the related loader operate, fetches the information, and passes the information to the part by way of the useLoaderData hook, and not using a useEffect in sight. This promotes a sample the place information fetching is tied on to routing.

There’s additionally a brand new <Type> part which prevents the browser from sending the request to the server and sends it to your route’s motion as an alternative. React Router then robotically revalidates the information on the web page after the motion finishes, which suggests your whole useLoaderData hooks replace and the UI stays in sync together with your information robotically.

To make use of these new APIS, you’ll want to make use of the brand new <RouterProvider /> part. This takes a router prop which is created utilizing the brand new createBrowserRouter operate.

Discussing all of those adjustments intimately is exterior the scope of this text, however for those who’re eager to seek out out extra, I’d encourage you to observe together with the official React Router tutorial.

Abstract

As you’ve seen on this article, React Router is a robust library that enhances React for constructing higher, declarative routing in your React apps. On the time of writing, the present model of React Router is v6.18 and the library has undergone substantial change since v5. That is partly because of the affect of Remix, a full-stack net framework written by the identical authors.

On this tutorial, we discovered:

• easy methods to arrange and set up React Router
• the fundamentals of routing and a few important elements similar to <Routes>, <Route> and <Hyperlink>
• easy methods to create a minimal router for navigation and nested routes
• easy methods to construct dynamic routes with path parameters
• easy methods to work with React Router’s hooks and its newer route rendering sample

Lastly, we discovered some superior routing strategies whereas creating the ultimate demo for protected routes.

FAQs