React is a JavaScript library used to build user interfaces. Unlike libraries such as Angular and Ember, which include a routing package, the React library does not include any components or services that help in routing. React-Router is a routing library that can be used in any React application, web or native. React-Router version 4 is a complete rewrite of the earlier versions and all of its components are written in React. The library includes the packages react-router-dom for use in web applications; react-router-native, for use in native applications built with React-Native; and react-router, a core package that both react-router-dom and react-router-native have a dependency on.
The create-react-app CLI is used to quickly scaffold a React application. It includes build configuration scripts that can be used to generate builds for development and production environments. The react-router-dom package is then added as a dependency to the application. The package includes the <BrowserRouter> component, which implements a History interface. The application's root component, <App />, is wrapped inside React-Router's <BrowserRouter> component to make the History object available to all the components in the application tree.
To create our first route, the <Route> component is included. It accepts path and component as props, and renders the component when the browser's URL matches the <Route> path.
In Chapter 2, Configuring Routes - Using Various Options in the Route Component, the <Route> component props are discussed in detail. Also, we will take a look at the various props that the rendered component receives, and consider how these props can be used to create nested routes.