Module 1 - React Router

How to Build It

To get started we will need a fresh React application. Open your terminal and set up a new Create React App (CRA) folder structure like so:

npx create-react-app@5.0.1 my_project

Next, cd into the project folder and run:

npm i react-router-dom@6.8.1

Now open your project in VSCode. Navigate to App.js and erase all contents. Then, type the following import code:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

How to Build It

Assuming that you have already installed react-router-dom via npm, the next step involves "wrapping" the component tree with <BrowserRouter>. This step is necessary for React Router to work its magic and must only be done once for a given application. Commonly, you will wrap the whole tree inside the index.js module, but to keep all the code in this demo in a single file, you will work inside App.js

Setting up React Router

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <h1>My App</h1>
      {/* In here we will set up navigation and routes */}
    </BrowserRouter>
  );
}

Building Components for the Different Routes

Usually, you will create one big, top-level component for each of the main "screens" of your app, each screen corresponding to a specific URL. Let's suppose your app has three main screens or routes: "Home," "Cats" and "About." To keep all the code in the same module for this demo, you will declare these components inside App.js, above the App function:

const style = { margin: "1rem", padding: "0.5rem", border: "2px solid black" };

function Home(props) {
  return <h2 style={{ ...style, borderColor: "red" }}>The Home Screen</h2>;
}

function Cats(props) {
  return <h2 style={{ ...style, borderColor: "blue" }}>The Cats Screen</h2>;
}

function About(props) {
  return <h2 style={{ ...style, borderColor: "green" }}>The About Screen</h2>;
}

Adding Links to Navigate the URL

This next step involves creating navigation links to change the URL when the user clicks on them. Of course, this will be "client-side", or "frontend" routing: no page reloads will trigger as the user navigates between the three screens. Modify the App component like so:

export default function App() {
  return (
    <BrowserRouter>
      <h1>My App</h1>
      <nav>
        <Link to="/">Home Screen</Link> 
        <Link to="cats">Cats Screen</Link> 
        <Link to="about">About Screen</Link>
      </nav>
    </BrowserRouter>
  );
}

Let's see what our Website looks like. Navigate back to your terminal and run: npm start

Click on the rendered anchor tags, and watch the address bar in the browser change to the correct path without the browser reloading. Also, the Back and Forward buttons of the browser should work correctly. This is "client-side routing" in action: the URL changes its path, but no network request is made to the server!

At this point, the components are not rendering yet; you are just managing URLs and links.

Creating the Routes

Finally, you will set up the components' routes. You will create routes for each of the three URLs (/, cats and about). Avoid adding forward slashes where they are not needed! Edit the App component:

export default function App() {
  return (
    <BrowserRouter>
      <h1>My App</h1>
      <nav>
        <Link to="/">Home Screen</Link> 
        <Link to="cats">Cats Screen</Link> 
        <Link to="about">About Screen</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="cats" element={<Cats />} />
        <Route path="about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Notice how the to prop of each <Link> matches the path prop of each <Route>. The component associated with each route is defined through the element prop.

And just like that, every time a user causes the URL to change by clicking on a link (or typing in the address bar), the <Routes> component will look for a route with a path prop that matches the new URL. If a match is found, the component specified in the element prop of the <Route> will render to the screen.

How to Build It

In this example, you will simply attach a "click" navigation handler to a button.

First, you must import the hook (add useNavigate to your original import statement). Then, you can edit the App.js file to add:

• A new More component (page) which will be rendered (navigated to) when the user clicks on the button inside the About page;
• A new route the the More page;
• And the function that uses the hook, inside the About component.

import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useNavigate,
} from "react-router-dom";

const style = { margin: "1rem", padding: "0.5rem", border: "2px solid black" };

function Home(props) {
  return <h2 style={{ ...style, borderColor: "red" }}>The Home Screen</h2>;
}

function Cats(props) {
  return <h2 style={{ ...style, borderColor: "blue" }}>The Cats Screen</h2>;
}

function About(props) {
  const navigate = useNavigate();
  return (
    <>
      <h2 style={{ ...style, borderColor: "green" }}>
        The About Screen
        <button onClick={() => navigate("/more")}>More Details</button>
      </h2>
    </>
  );
}

function More(props) {
  return (
    <h2 style={{ ...style, borderColor: "orange" }}>
      THESE ARE ALL THE DETAILS!
    </h2>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <h1>My App</h1>
      <nav>
        <Link to="/">Home Screen</Link> 
        <Link to="cats">Cats Screen</Link> 
        <Link to="about">About Screen</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="cats" element={<Cats />} />
        <Route path="about" element={<About />} />
        <Route path="more" element={<More />} />
      </Routes>
    </BrowserRouter>
  );
}

The navigate function either takes an absolute URL path, or a delta representing where you want to go in the history stack:

navigate(-1) would take the user the previous page. So you could easily add a "Back" button to the More page by editing the More component:

function More(props) {
  const navigate = useNavigate();
  return (
    <h2 style={{ ...style, borderColor: "orange" }}>
      THESE ARE ALL THE DETAILS!
      <button onClick={() => navigate(-1)}>Back</button>
    </h2>
  );
}

acme.com/users/1 // gets user with id 1
acme.com/users/2 // gets user with id 2
.
.
.
acme.com/users/225 //gets user with id 225 (this could go on forever)

<Route path="users/:id" element={<User />} />

How to Build It

To get started, you can use the previously created React app to edit the files or spin up a new "Create React App" like so:

npx create-react-app@5.0.1 my_project
cd my_project
npm start

Now replace the contents of the App.js file with the following:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

const style = { margin: "1rem", padding: "1rem", border: "2px solid black" };

function Home(props) {
  return <div style={{ ...style, borderColor: "red" }}>The Home Screen</div>;
}
function User(props) {
  return (
    <div style={{ ...style, borderColor: "blue" }}>Details about a user</div>
  );
}
export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home Page</Link> 
      </nav>
      <Routes>
        <Route path="/" element={<Home />} /> // here's the Home route, the only route so far
      </Routes>
    </BrowserRouter>
  );
}

The code above is the starting point and includes a single route for the Home page at path /.

Start by adding a few links inside your <nav> (we'll get to the routes in a moment) so you can toggle between different users. You will map over an array of integers to dynamically create links to particular users:

<nav>
  <Link to="/">Home Page</Link> 
  {[1, 2, 3].map((int) => (
    <Link key={int} to={`users/${int}`}>
      User {int}{" "}
    </Link>
  ))}
</nav>

Quickly test your links to ensure they work. The UI should be blank as you toggle between the three users, but you should see the browser's address bar adjusting correctly. The / path should render the Home component.

With the links in place, you can add the parametric route. To make a route match users/anything, you add a parametric segment in the path of the new route using a colon:

<Routes>
  <Route path="/" element={<Home />} />

  {/* notice the ":id" in the route below. The colon means "variable segment",     and it can be any data type */}
  <Route path="users/:id" element={<User />} />
</Routes>

Navigate to a user again and see how the User component renders now. The User component will obligingly render if you manually edit the URL in the browser's address bar by typing "users/" followed by any value and hitting Enter.

At this point, the content displayed in the UI is the same for all user URLs because the User component receives no dynamic data. You can fix that by getting the parameter in the URL and utilizing a hook to fetch the user's information. React Router includes the useParams hook that you can use to "grab" the value of the variable segment in the URL.

To get the URL parameter, you'll first import the hook:

import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useParams,
} from "react-router-dom";

You'll use this hook inside the User component:

function User(props) {
  // the name of the param is `id` because we used `users/:id` in the path of the route
  const { id } = useParams();
  return (
    <div style={{ ...style, borderColor: "blue" }}>Details about user {id}</div>
  );
}

Now that you have access to the ID of the particular user inside the component, you can add code to use it. Let's add a couple of imports to manage effect and state:

import { useEffect, useState } from "react";

Use some code to fetch details about a specific user. First, go to your project folder and install axios:

npm i axios

You are going to use the https://webapis.bloomtechdev.com/users/ endpoint, which exposes five users (1...5) and returns a JSON like this:

"{
  "id": 1,
  "name": "Ada Lovelace",
  "bio": "Ada Lovelace was an English mathematician and writer, chiefly known for her work on Charles Babbage's early mechanical general-purpose computer, the Analytical Engine. Many regard her as the first computer programmer."
}"

Finally, edit the User component to fetch the data and pass it to setUser:

function User(props) {
  // The param is `id` because we did `:id` in the path of the Route in App!
  const { id } = useParams(); // grabbing `1` from `users/1` and using it in the JSX
  const [user, setUser] = useState({});
  useEffect(() => {
    // append the id to the end of this url
    axios.get(`https://webapis.bloomtechdev.com/users/${id}`).then((obj) => {
      setUser(obj.data);
    });
  }, [id]);
  return (
    <div style={{ ...style, borderColor: "blue" }}>
      <h2>
        User {user.id}: {user.name}
      </h2>
      <h3>{user.bio}</h3>
    </div>
  );
}

Notice how the effect hook is only triggered when the id changes. The effect updates the user state variable and forces the component to render, returning the JSX, which now contains the fetched user's data.

How to Build It

For now, let's read some code to better understand the concept. You could also spin up a new React app and practice:

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

const Home = () => <h4>Home Page</h4>
const Products = () => <h4>Products Page</h4>

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home Page</Link> 
        <Link to="products">Products</Link> 
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="products" element={<Products />} />
      </Routes>
    </BrowserRouter>
  )
}

This main component currently contains two routes: / to Home and products to Products. If the user types any other URL in the address bar, the app will log a warning telling you that a route for that URL does not exist.

Now let's say you wanted to add routes and components for two products: cameras (products/camera) and computers (products/computer). You can add each product as a child route of the Products component using nested routes.

The first step to add nested routes is to inform the products route that it allows for nested routes. Note the asterisk:

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home Page</Link> 
        <Link to="products">Products</Link> 
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="products/*" element={<Products />} />
      </Routes>
    </BrowserRouter>
  )
}

By changing the second route to products/*, you effectively tell the app to accept any route that starts with products and then delegate the route matching to the Products component.

We will make the Products component more complex so it is able to handle the nested routes:

function Products() {
  return (
    <>
      <h4>Products Page</h4>
      <nav>
        <Link to="camera">Camera</Link> 
        <Link to="computer">Computer</Link> 
      </nav>
      <Routes>
        <Route path="camera" element={<h4>Camera Page</h4>} />
        <Route path="computer" element={<h4>Computer Page</h4>} />
      </Routes>
    </>
  )
}

This is one of the coolest features in React Router: any component can have its routes inside of it intuitively.