Appendix A. React Router 4 basics
This appendix covers
- Using declarative routing in your components
- Using configurable routing to create a single source of truth
- Moving code from React Router 3 lifecycle events into a higher-order component
- Prefetching data in the browser by using a higher-order component
React Router 4 represents a big change in thinking from React Router 3. It moves from a standard static router implementation in which you define your routes in a single file to a dynamic implementation in which routes are created within React components. This also allows you to move most lifecycle logic out of React Router lifecycle methods and into React’s lifecycle. Let’s start by reviewing how you switch your components over to use React Router’s decentralized routing pattern. The code examples in this appendix assume you’ve reviewed the React Router 3 version and want to see the differences. Each listing assumes that code presented in the related chapter is familiar to you. I’ve listed new code in bold.
In this section, I’ll walk you through making routes work in a single-page application (SPA) architecture so you understand the basics of React Router 4. The code for the examples in this section can be found in the repo for the complete isomorphic example at http://mng.bz/zRGa. The code can also be found in the branch chapter-4-react-router-basic-routes (git checkout chapter-4-react-router-basic-routes).