Summary

React Router gives us a comprehensive set of components for managing the navigation between pages in our app. We learned that the top-level component is Router, which looks for Route components beneath it where we define what components should be rendered for certain paths.

The Link component allows us to link to different pages with an app. We learned that the NavLink component is like Link, but it includes the ability to style it depending on whether it is the active path or not. So, NavLink is perfect for the main navigation element in an app and Link is great for other links that appear on pages.

RouteComponentProps is a type that gives us access to route parameters and query parameters. We discovered that React Router doesn't parse query parameters for us, but can use the native JavaScript URLSearchParams interface to do this for us.

The Redirect component redirects to a path under certain conditions. We found that this is perfect for protecting pages that only privileged users can access.

The Prompt component allows us to ask the user to confirm they want to leave a page under a certain condition. We used this on the Product page to double-check whether users wanted to buy the product. Another common use case for this component is confirming navigation away from a data entry page when the inputted data hasn't been saved.

We learnt about how nested routes can provide users with deep links into very specific parts of our app. We simply define the relevant links using Link or NavLink and Route components to handle those links.

We improved our app experience with page transitions using the TransitionGroup and CSSTransition components from the react-transition-group npm package. We wrapped these components around our Route components that define the app paths and added CSS classes to do the animation we want when pages exit and enter into view.

We learnt that the React lazy function along with its Suspense component can be used on large components that are rarely used by users to load them on demand. This helps performance for the startup time of our app.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.139.83.151