Video 54-1 Module Introduction, simple react router setup
Video 54-2 (interesting) Nested route and outlet for shared
content
Video 54-3 Avoid reload using Link and Load data on route
Video 54-4 Display users, create dynamic link with route
parameter
Video 54-5 React route parameter and load data based on dynamic
route
Video 54-6 (Recap) Dynamic Data loader and navigate on button
click
Video 54-7 Active route, Loading Spinner and Not Found
Video 54-8 Module Summary and Recap React Route for Rest
Countries
QUIZ
Q1: What does a 404 mean to a web developer? (google it)
Ans: The page or path you are trying to access is not available
Q2: Why will you need a router for your app?
Ans: So that you can show a specific component based on the current route
Q3: How will you import a createBrowserRouter from React Router
Dom?
Ans: import{createBrowserRouter} from "react-router-dom"
Q4: Which props will you set on the RouterProvider?
<RouterProvider ____?___ = {router}/>
Ans: router
Q5: const router = createBrowserRouter([
{ path: 'about', element: <About></About> },
{ path: '*', element: <NotFound/> }
]);
If you hit http://localhost:3000/abut which component will you see?
Ans: <NotFound/>
Q6: Which is true about <Outlet/>?
Ans: All of the above
Q7: How will you set a dynamic part (path parameter) named id,
under the user route?
{ path: “ ? “, element: <UserDetails/> }
Ans: /user/:id
Q8: Which router hook provides the value returned from your
route loader?
Ans: useLoaderData
Q9: Which of the following hook of react-router-dom will
allow you to navigate programmatically to a different route?
Ans: useNavigate()
Q10: const router = createBrowserRouter([
{ path: 'about', element: <About></About> },
{ path:'/product/:productId',loader: async (____?____) =>{return
fetch(url)},element:<ProductDetails/>
},
])
What will you pass to the loader async function to parse the dynamic part of the current URL?
Ans: {params}
