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

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=Tesla

Returns the location object representing the current URL.

useNavigate

Navigate programmatically

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