So far our Pokedex app only has a single page.

Let's make this more interesting…

Let's make this more interesting…

Routing

We want to define distinct pages within our application.

The current page at a given time is defined by the URL of the browser tab.

The URL can contain parameters which are used by a page to show specific data.

React does not provide routing.

Basic Routing with React Router

Install the Package

How to Define Routes

How to Define Routes

The BrowserRouter provides the access to the routing functionality.

How to Define Routes

A Routes component renders the most specific matching route (exclusively).

How to Define Routes

Here we define a route with the path /page1 .

How to Define Routes

The page to be renderered for this route is simply defined as element of Route .

How to Define Routes

Page1.tsx

The "page" is just a normal React component.

Routes with Parameters

This route has a parameter carId .

Routes with Parameters

CarDetailPage.tsx

The useParams Hook returns the parameters of the current route as an object.

Route Redirection

With the Navigate component, a route can be redirected to another route.

How to Link to a Route

Cheat Sheet

<BrowserRouter />

<Routes />

<Route path="/cars/:carId" element={<CarDetailPage />} />

<Navigate to="/cars" replace />

<Link to="/cars/42">Go to Car 42</Link>

Exercise

1. Implement a detail view to show the detail data of a specific pokemon.

   GET https://pokeapi.co/api/v2/pokemon/ name

2. Split the app up into two navigatable pages:
   • The Home page shows the list of pokemon.
   • When clicking on a pokemon in the list, the pokemon detail page is shown.

Detail API

                
                    {
                        "name": "bulbasaur",
                        sprites: {
                            "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png",
                            ...
                        },
                        ...
                    }
                
            

Stretch Goal

Think about what to do with the username input and display functionality.

Can we have the input on a Profile page but show the name on all pages?

Solution

App.tsx

PokeListEntry.tsx

DetailPage.tsx

More about React Router

NavLink

A NavLink is marked with the specified CSS class/style when its route is active.

Nested Routes

Nested Routes

useLocation

Current URL: /cars?filter=Tesla

Returns the location object representing the current URL.

useNavigate

Navigate programmatically

MemoryRouter

Use instead of BrowserRouter for tests.