Routing with React Router
Part of the React course
Everything you have built so far lives at one address. There is a single page, and whatever you want the user to see, you show or hide with state. That works until somebody wants to bookmark the settings screen, or send a colleague a link to one particular user, or press the browser's back button and end up where they expect.
A single-page app does not reload the whole page when you move around. The browser downloads the JavaScript once, and from then on switching screens is just React rendering different components. But the URL should still change, and the back button should still work, and typing an address directly should still land you in the right place.
Want to learn React Routing with React Router in a real environment?
Click below, get a fresh Linux box with React ready to go, and work through Routing with React Router hands-on with an AI tutor that knows your code.
Start this lessonRouting with React RouterWhat you'll learn
- Installing react-router-dom
- BrowserRouter
- Routes and Route
- Link for navigation
- UseParams
- UseNavigate
Read this lesson in your language
All lessons in this course
17 lessons- 1What is React?25 min
- 2JSX and Components30 min
- 3Props30 min
- 4State with useState35 min
- 5Handling Events30 min
- 6Conditional Rendering and Lists30 min
- 7Forms and Controlled Inputs35 min
- 8Effects with useEffect40 min
- 9Data Fetching40 min
- 10Component Composition35 min
- 11Context and useContext35 min
- 12useReducer35 min
- 13Custom Hooks35 min
- 14Performance and Memoization35 min
- 15Routing with React Router40 min
- 16Testing React Components40 min
- 17Capstone: Todo App60 min
Explore other courses
