Skip to content

Commit e0519dd

Browse files
fibibotbartlomieju
andauthored
Add react-router-dom install step to React tutorial (#3124)
Co-authored-by: fibibot <fibibot@users.noreply.github.com> Co-authored-by: Bartek Iwańczuk <biwanczuk@gmail.com>
1 parent 66beb9f commit e0519dd

1 file changed

Lines changed: 21 additions & 3 deletions

File tree

examples/tutorials/react.md

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
last_modified: 2025-09-29
2+
last_modified: 2026-05-14
33
title: "React app with Vite"
44
description: "Complete guide to building React applications with Deno and Vite. Learn how to set up a project, implement routing, add API endpoints, and deploy your full-stack TypeScript application."
55
url: /examples/react_tutorial/
@@ -245,9 +245,16 @@ createRoot(document.getElementById("root")!).render(
245245

246246
## Add a router
247247

248-
The app will have two routes: `/` and `/:dinosaur`.
248+
The app will have two routes: `/` (the list of dinosaurs) and `/:dinosaur` (the
249+
detail page for one dinosaur). The Vite React template ships as a single page,
250+
so we need a client-side router to swap which component renders based on the
251+
URL. We'll use `react-router-dom` for that — install it with:
249252

250-
We'll set up the routing in `src/App.tsx`:
253+
```sh
254+
deno add npm:react-router-dom
255+
```
256+
257+
Then set up the routing in `src/App.tsx`:
251258

252259
```tsx title="src/App.tsx"
253260
import { BrowserRouter, Route, Routes } from "react-router-dom";
@@ -268,6 +275,17 @@ function App() {
268275
export default App;
269276
```
270277

278+
Three pieces are doing the work here:
279+
280+
- `<BrowserRouter>` wraps the app so the rest of the tree can read the current
281+
URL and trigger navigations without a full page reload.
282+
- `<Routes>` picks the first matching `<Route>` for the current path and renders
283+
its `element`.
284+
- `<Route path="/:selectedDinosaur" ...>` declares a path parameter. When the
285+
URL is `/triceratops`, React Router exposes `selectedDinosaur: "triceratops"`
286+
to the matched component — that's what `Dinosaur.tsx` reads later via
287+
`useParams()` to know which dinosaur to fetch.
288+
271289
## Proxy to forward the api requests
272290

273291
Vite serves the React application on port `3000` while the API runs on port

0 commit comments

Comments
 (0)