React Router (v6) - The Complete Guide

Set up the browser router as the app's root container to host all routes, create a simple root path, and alias the router for cleaner code.

Declare routes in react router dom v6 by wrapping with browser router and defining path and element for each route, including the root and admin paths.

Create separate books and admin components and wire them into routes with a route switch in React Router v6, then style them with styled-components.

Handle not found paths in React Router v6 by rendering a 404 component or redirecting to the main route, using a wildcard asterisk at the end of routes.

Learn to replace 404 messages with a redirect to login using React Router DOM's Navigate component, routing users based on authentication, and explore dynamic, static, relative, and absolute navigation.

Learn to build a reusable navigation bar for a React Router v6 app, using Link for admin and books paths, and styled-components to style active links.

Learn how to use NavLink in React Router v6 to apply styles based on the active state, toggle the active class between links, and style active nav items with CSS.

Learn to implement nested routes in React Router v6 using Outlet, create a books list under a books parent route, and render child content inside the parent layout.

Fetches book data from a server using Axios in a React component, initializes state, uses useEffect for a one-time get to /books, then renders book titles or a loading message.

Style a book list and make each book card clickable, navigating via relative navigation to a book detail by ID using React Router v6 and styled components.

Learn how to implement dynamic routes with React Router v6 by creating an id-based path, a book component, and outlet rendering for dynamic navigation.

Learn to access route params in React Router v6 by using the useParams hook to extract the id from dynamic routes and fetch the corresponding book data.

Grab the id from the dynamic route with useParams, fetch the book data via axios from books/{id}, and render the title, image, and price.

Learn to handle fetch errors in React Router v6 by using the useNavigate hook to programmatically redirect users to the books list when a requested book is not found.

Learn how to pass state with navigation in React Router v6 using the navigate function and a state object. Use use location to access the state and display contextual warnings.

Explore navigation deltas in React Router v6, using navigate with strings for paths and numbers for history steps, including a back button that moves backward in history.

Apply domain-driven routing with React Router v6 by nesting routes inside domain components using an asterisk wildcard, creating cleaner, modular routes that delegate nested paths to each domain.

Learn to implement a protected route pattern in React Router v6 to restrict admin access, using an authenticated flag, redirects, and nested routes for scalable access control.

Render the admin nested route with the books list and a form to edit and update books, and explain relative navigation and the forward slash asterisk rule.

Navigate nested routes in React Router v6 by linking to a new book path under admin. Implement an admin book edit component and use an asterisk for proper nesting.

Build a book edit form with styled components, manage id, title, price, and description via state, and create new books using axios post to /books/new.

Redirect to the newly created book page using React Router (v6) use navigate after posting with Axios, routing to admin/{id}, and handle errors with alerts.

Learn to implement dynamic book editing routes in React Router v6 by fetching a book by id, populating an edit form, and handling errors with navigation and history replacement.

Implement a delete button and axios delete call to remove a book, handle errors, and use an edit flag to distinguish create from edit.

Learn how to use React Router v6's useSearchParams to read and write URL search params, convert them with Object.fromEntries, and apply order and sort to data.

Learn to link UI state with URL search params in React Router v6, updating sort by title or price and order via radio buttons with persistent defaults.

Render a books list by reading URL search params, sort by title or price, and order ascending or descending, updating state accordingly.

Learn to automatically scroll to the top on route changes by building a scroll top component that watches the path name with use location and useEffect in React Router DOM.

Learn to configure React Router v6 routes with a config object using useRoutes, replacing JSX route elements for cleaner, scalable routing, including protected routes and a 404 fallback.

Recap key React Router (v6) concepts, including creating paths, navigation, nested and dynamic routes, programmatic navigation, route params, and CRUD with REST API integration.