Summary
Highlights
The video concludes by encouraging viewers to explore more advanced React Router features not covered in the tutorial, such as data loading with `loaders` and data mutation with `actions`. These features are accessible when using `createBrowserRouter` and offer powerful ways to manage data within your React applications.
This video will teach you how to implement client-side routing in React using React Router. The tutorial starts with a simple React application that displays a HomePage component. The goal is to enable navigation between HomePage, ProfilesPage, and individual ProfilePage components. The first step involves replacing the hard-coded HomePage with a router from React Router.
To implement routing, you'll first import `createBrowserRouter` from 'react-router-dom'. This is the recommended way to create a router, offering typical browser navigation features and access to new data APIs like loaders and actions. The `createBrowserRouter` setup will replace the direct rendering of the HomePage component.
While `createBrowserRouter` is generally recommended, React Router offers other types like `createMemoryRouter`, `createHashRouter`, and `createStaticRouter` for specific use cases. The video briefly mentions the older method of defining routes using JSX components (`BrowserRouter` and `Routes`); however, the tutorial focuses on the modern, recommended approach.
The application's entry point is deferred to React Router using the `RouterProvider` component. This component is responsible for rendering the correct components based on the defined routes. The first route defined is for the homepage ('/') which renders the `HomePage` component, and then a route for '/profiles' which renders the `ProfilesPage` component is added.
To handle invalid URLs, an `errorElement` is added to the route configuration. This `errorElement` renders a custom 'Not Found Page' component when a user navigates to a non-existent route, improving user experience by offering a clear message and a button to return to the homepage. The difference between an anchor tag and a `Link` component from React Router is explained, highlighting client-side navigation benefits.
The `ProfilesPage` is updated to display a list of profile links. Each link directs to a dynamic path, such as '/profiles/:profileId', which is handled by a new route that renders the `ProfilePage`. The concept of dynamic parameters in URLs (e.g., `:profileId`) is introduced, allowing the same component to render different data based on the URL segment.
To make the `ProfilePage` aware of which profile it's displaying, the `useParams` hook from React Router is utilized. This hook allows access to the dynamic parameters defined in the route. For TypeScript users, a tip is provided on how to type the `useParams` hook for better type safety and autocompletion.
The tutorial demonstrates how to create nested routes. By making the individual profile route a child of the '/profiles' route, the `ProfilesPage` can remain visible while an individual profile is displayed. The `Outlet` component is introduced as a placeholder within the parent component where child routes are rendered, enabling a more complex UI layout.
To enhance user experience, the `Link` components for profiles are replaced with `NavLink`. `NavLink` automatically applies a className based on whether the link is active, allowing for visual highlighting of the currently viewed profile. This provides immediate feedback to the user about their current location within the application.