From cf2aee35032c1331d278018c9891bdd47b090aa4 Mon Sep 17 00:00:00 2001 From: fibibot Date: Thu, 14 May 2026 09:34:49 +0000 Subject: [PATCH] Add react-router-dom install step and explain routing setup The "Add a router" section imported react-router-dom in three files without ever telling the reader to install it, so following the tutorial verbatim produced unresolved-import errors. Added the deno add command and a short explanation of what BrowserRouter, Routes, and Route do, including how the :selectedDinosaur path parameter flows to useParams() in Dinosaur.tsx. --- examples/tutorials/react.md | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/examples/tutorials/react.md b/examples/tutorials/react.md index 9dc1f53ea..2bf9e337c 100644 --- a/examples/tutorials/react.md +++ b/examples/tutorials/react.md @@ -1,5 +1,5 @@ --- -last_modified: 2025-09-29 +last_modified: 2026-05-14 title: "React app with Vite" 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." url: /examples/react_tutorial/ @@ -245,9 +245,16 @@ createRoot(document.getElementById("root")!).render( ## Add a router -The app will have two routes: `/` and `/:dinosaur`. +The app will have two routes: `/` (the list of dinosaurs) and `/:dinosaur` (the +detail page for one dinosaur). The Vite React template ships as a single page, +so we need a client-side router to swap which component renders based on the +URL. We'll use `react-router-dom` for that — install it with: -We'll set up the routing in `src/App.tsx`: +```sh +deno add npm:react-router-dom +``` + +Then set up the routing in `src/App.tsx`: ```tsx title="src/App.tsx" import { BrowserRouter, Route, Routes } from "react-router-dom"; @@ -268,6 +275,17 @@ function App() { export default App; ``` +Three pieces are doing the work here: + +- `` wraps the app so the rest of the tree can read the current + URL and trigger navigations without a full page reload. +- `` picks the first matching `` for the current path and renders + its `element`. +- `` declares a path parameter. When the + URL is `/triceratops`, React Router exposes `selectedDinosaur: "triceratops"` + to the matched component — that's what `Dinosaur.tsx` reads later via + `useParams()` to know which dinosaur to fetch. + ## Proxy to forward the api requests Vite serves the React application on port `3000` while the API runs on port