React JS Tutorial - Course Lessons #8 - Routing in React - react-router-dom - Learn ReactJS

Routing in React (react-router-dom)
React JS Tutorial - Course Lessons #8 - Routing in React - react-router-dom - Learn ReactJS

React terms : Routing, react-router-dom, URL, BrowserRouter, Route, Switch, Link, Redirect, Literal Template, Route parameters, spread the props, render, path
Route props - match, location, history, match.params

Key components in routing -
BrowserRouter (wrap the application)
Route (matches the URL and renders component)
Link (replaces anchor tag without page reload)
Switch (renders the first Route whose path matches the URL)
Redirect (redirects from a URL to a URL)
Route Parameters : to specify a dynamic route with a : (colon)
Literal Template : introduced in ES6, a powerful way to construct dynamic strings

With Sample Codes and Exercises, do the exercises and understand the various validation techniques.

For the laptops code exercise, the state data is available at https://raw.githubusercontent.com/edufectcode/react/main/lt-routing-exer

Learn complete React in this video tutorial series. A must watch for all ReactJS beginners and learners. With lots of samples, code, practice questions and projects, learn and master React and become an awesome front end developer.

00:00 Routing in React (react-router-dom)
01:35 BrowserRouter
02:21 Link
03:09 Route, Redirect
03:41 Switch
04:36 Sample Code 1a: A simple routing app
13:24 Passing custom props in Route with render
15:20 Sample Code 1b: Custom props in Route
21:56 Route parameters
23:01 Literal Template
23:59 Sample Code 1c: Defining Route parameters
31:43 Sample Code 1d: Defining Route parameters
41:32 Code Exercise : Course App with React Routing
57:55 Code Exercise : Laptop App with React Routing

Complete React Lessons and ReactJS playlist -
https://www.youtube.com/playlist?list=PLC8jf7P7lrixhadKw5_hc0jjaPPMroUyC