Summary
React Router gives us a comprehensive set of components and hooks for managing the navigation between pages in our app. We used createBrowserRouter to define all our web app’s routes. A route contains a path and a component to render when the path matches the browser URL. We used an errorElement prop for a route to render a custom error page in our app.
We used nested routes to allow the App component to render the app shell and page components within it. We used React Router’s Outlet component inside the App component to render page content. We also used an index route on the root route to render a welcome message.
We used React Router’s NavLink component to render navigation links that are highlighted when their route is active. The Link component is great for other links that have static styling requirements – we used this for product links on the product list. We used React Router’s Form component to navigate to the products list...