So far our Pokedex app only has a single page.

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 itself does not provide routing.

React Router can be used in two different manners:

Basic Routing with React Router

Install the Package

How to Define Routes

How to Define Routes

createBrowserRouter creates an instance of a router that will be used.

How to Define Routes

Here we define a route with the path /page1 and tell it to render the Page1 component .

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.

With using the replace prop, no entry will be added to the browser history.

How to Link to a Route

Cheat Sheet

const router = createBrowserRouter([...]);

<RouterProvider router={router} />

{path: '/cars/:carId', element: <Car/>}

<Navigate to="/cars" replace />

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

Exercise

1. 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.
2. Use the mock data provided in the github repository

   https://github.com/webplatformz/react-pokedex-vite/tree/chapter-05-routing/src/mockData

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

Layout.tsx

ListPage.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=Porsche

Returns the location object representing the current URL.

useNavigate

Navigate programmatically

useSearchParams

Current URL: /cars?filter=Porsche

Read and write search params using the standard URLSearchParams interface.

MemoryRouter

Use instead of BrowserRouter for tests.

How should I structure the code?

• What is the best application structure?
• What best practices are out there?

Folder structure

No official guidelines on React.dev

For component structure & hierarchy, align as closely as possibly with the UX & UI experts on the team. A very common approach is Atomic Design

Folder structure

Divide & conquer

• Split components in multiple reusable components
• Extract hook logic to custom hooks (upcoming chapter)
• Extract non-react logic to functions
• Make reusable things reusable
• Group similar application elements in same directories

Evolve your folder structure as you need it

Folder structures

Best practices

• Read the documentation of React and used libraries
• Use ESLint & Prettier
• Use Typescript
• Write tests
• Verify all those things in continuous integration (and do so strictly)
• Use storybook.js to collaborate with UX/UI designers