Preface

The React framework from Facebook redefines the way frontend applications should be built. React Router has become the de-facto routing framework for applications built with React. With its latest version 4 release, the library has been rewritten in React and it lets you handle routing declaratively. In this book, you'll learn how the react-router library can be used in any React application, including web and native mobile applications developed with React Native. The book also covers topics such as server-side routing and Redux integration with React Router.

Who this book is for

This book is for web and native mobile application developers who are considering building applications using React and React Router. A little knowledge of the React framework and JavaScript would be helpful in understanding the concepts discussed in this book.

What this book covers

Chapter 1, Introduction to React Router 4 and Creating Your First Route, is an introduction to the component-based architecture in React and how you can get started with creating routes using the Route component from React Router.

Chapter 2, Configuring Routes – Using Various Options in the Route Component, discusses various Route component props that can be used to match the requested URL location and how these matches can be used to render a component. Also, the chapter explains how routes can be added dynamically as the user traverses through the application.

Chapter 3, Using the Link and NavLink Components to Navigate to a Route, talks about how to use the Link and NavLink components in React Router to allow you to navigate to routes defined in the application. This chapter also explains about the higher-order component withRouter and how to prevent accidental transition using the Prompt component.

Chapter 4, Using the Redirect and Switch Components, goes into how to use the Redirect component to redirect the user to a different route and the Switch component to match one route and redirect the user to a 404 page not found page if the requested location is not found.

Chapter 5, Understanding the Core Router, and Configuring the BrowserRouter and HashRouter components, is an in-depth explanation of how the core router interface is used to update the sections of the screen and the browser's history. The chapter also explains two router interfaces used in a web application: BrowserRouter and HashRouter.

Chapter 6, Using StaticRouter in a Server-Side Rendered React Application, explores how to use the StaticRouter component to provide routing features on a server-side-rendered application. The chapter also explains how StaticRouter and BrowserRouter can be used to build an isomorphic web application.

Chapter 7, Using NativeRouter in a React Native Application, details how to provide routing in a native mobile application developed with React Native using the NativeRouter component. The chapter also explains how you can integrate with the device's back button using the BackButton component and provide deep linking support using the DeepLinking component.

Chapter 8, Redux Bindings with connected-react-router, examines how to use the connected-react-router library, which provides Redux bindings for React Router; the chapter explains how to read routing information from the router state in the Redux store and how to navigate by dispatching actions to the store.

To get the most out of this book

React Router is used in web and native applications developed with React. The book assumes that you have a good understanding of JavaScript and some of the new language features introduced in ECMAScript 6, such as classes and spread operators.

The book provides a brief introduction to React and component-based architecture in React. Some of the other core concepts of React are documented at https://reactjs.org.

The book assumes that the reader has used Node.js and NPM to install libraries and packages from the NPM repository.

Download the example code files

You can download the example code files for this book from your account at www.packt.com. If you purchased this book elsewhere, you can visit www.packt.com/support and register to have the files emailed directly to you.

You can download the code files by following these steps:

1. Log in or register at www.packt.com
2. Select the SUPPORT tab
3. Click on Code Downloads & Errata
4. Enter the name of the book in the Search box and follow the onscreen instructions

Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:

• WinRAR/7-Zip for Windows
• Zipeg/iZip/UnRarX for Mac
• 7-Zip/PeaZip for Linux

The code bundle for the book is also hosted on GitHub at https://github.com/PacktPublishing/React-Router-Quick-Start-Guide. In case there's an update to the code, it will be updated on the existing GitHub repository.

We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!

Download the color images

We also provide a PDF file that has color images of the screenshots/diagrams used in this book. You can download it here: https://www.packtpub.com/sites/default/files/downloads/9781789532555_ColorImages.pdf.

Conventions used

There are a number of text conventions used throughout this book.

CodeInText: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Mount the downloaded WebStorm-10*.dmg disk image file as another disk in your system."

A block of code is set as follows:

In GitHubComponent
GitHub ID - mjackson

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

<Route
    to='/github/:githubID'
    component={GitHubComponent}
/>

Any command-line input or output is written as follows:

 Root:
 path: /category, isExact: true

Bold: Indicates a new term, an important word, or words that you see onscreen. For example, words in menus or dialog boxes appear in the text like this. Here is an example: "Select System info from the Administration panel."

Warnings or important notes appear like this.

Tips and tricks appear like this.

Get in touch

Feedback from our readers is always welcome.

General feedback: Email [e-mail] and mention the book title in the subject of your message. If you have questions about any aspect of this book, please email us at [e-mail].

Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packt.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details.

Piracy: If you come across any illegal copies of our works in any form on the Internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [e-mail] with a link to the material.

If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.

Reviews

Please leave a review. Once you have read and used this book, why not leave a review on the site that you purchased it from? Potential readers can then see and use your unbiased opinion to make purchase decisions, we at Packt can understand what you think about our products, and our authors can see your feedback on their book. Thank you!

For more information about Packt, please visit packtpub.com.