React Router Quick Start Guide

Book description

Learn how you can implement routing in a React Web/Native application using React-Router library

Key Features

  • Create nested routes and complex workflows for your applications
  • Learn Routing in server-side rendered applications and in Native mobile applications
  • Understand how Redux bindings for React-Router works using the connected-react-router library

Book Description

React Router is the routing library for React, and it can be used in both React Web and React Native applications. This book is a simple way to get started with React Router and harness its full power for your applications.

The book starts with an introduction to React Router and teaches you how to create your first route using the React component. You will then learn about configuring your routes, passing parameters, and creating nested routes. You will be introduced to various components in React-Router and learn different configuration options available for these components. You will then see how to use the Redirect and Switch components. For even greater flexibility, you will learn about BrowserRouter, HashRouter, NativeRouter, and StaticRouter.

By the end of the book, you will have set up a project with React Router and make routing configuration work in a server-side rendered React application, a mobile application built with React Native and also understand how Redux and React-Router can be used in the same application.

What you will learn

  • Create your first Route using the Route component
  • Protect routes from unauthorized access by using the redirect component
  • Navigate to your defined route using Link and NavLink
  • Configure BrowserRouter and HashRouter using various props
  • Use StaticRouter for routing in server-side rendered React applications
  • Implement routing in a React Native app using react-router-native
  • Using connected-react-router library with React-Router for better state management

Who this book is for

This book is for JavaScript developers who have basic knowledge of React and who want to harness the power and flexibility of React Router

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. React Router Quick Start Guide
  3. Packt Upsell
    1. Why subscribe?
    2. packt.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Download the color images
      3. Conventions used
    4. Get in touch
      1. Reviews
  6. Introduction to React Router 4 and Creating Your First Route
    1. A brief look at React
      1. Component-based architecture in React
      2. Creating a React component
    2. Introduction to React-Router
    3. Getting started with React-Router
      1. Adding the React-Router library
      2. Defining application routes
    4. Summary
  7. Configuring Routes - Using Various Options in the Route Component
    1. Route props
      1. The exact prop
      2. The strict prop
      3. The sensitive prop
      4. Inline rendering with the render prop
      5. Inline rendering with the children prop
    2. Route component props
      1. History
      2. The location object
      3. The match object
    3. Route parameters
    4. Nested routes and dynamic routing
    5. Dynamic routes from JSON
    6. Summary
  8. Using the Link and NavLink Components to Navigate to a Route
    1. <Link> component
      1. replace prop
      2. innerRef prop
      3. to prop with an object
    2. <NavLink> component
      1. activeClassName prop
      2. activeStyle prop
      3. exact prop
      4. strict prop
      5. isActive prop
      6. location prop
    3. Navigating to nested routes
    4. Navigating to a route programmatically using history
    5. Using the withRouter higher–order component
    6. Preventing transitions with <Prompt>
    7. Summary
  9. Using the Redirect and Switch Components
    1. The <Redirect> component
      1. The to prop
      2. The push prop
    2. Protecting routes and authorization
      1. Redirecting with a callback route
    3. Exclusive routing with the <Switch> component
      1. Ordering of the <Route> components in <Switch>
        1. <Route> with path '/' as the first child in <Switch>
        2. <Route> with path params
      2. Adding a 404 – Page Not Found 
      3. Using <Redirect> in <Switch> to redirect to a Page Not Found page
      4. Redirecting from an old path to a new path
    4. Summary
  10. Understanding the Core Router, and Configuring the BrowserRouter and HashRouter components
    1. <Router> component
      1. Including <Router> from react-router
      2. react-router package
      3. react-router-dom package
    2. <BrowserRouter> component
      1. basename prop
      2. forceRefresh prop
      3. keyLengthprop
      4. getUserConfirmation prop
      5. Showing a custom dialog box using the getUserConfirmation prop
    3. <HashRouter> component
      1. hashType prop
    4. Summary
  11. Using StaticRouter in a Server-Side Rendered React Application
    1. Performing SSR of a React application using Node.js and Express.js
      1. Installing dependencies
      2. Webpack build configuration
      3. Server-Side application
      4. Rendering a React application using ReactDOMServer.renderToString
    2. Adding <StaticRouter> and creating routes
      1. Server-Side redirect using the <Redirect> and staticContext
      2. Request URL matching with matchPath
    3. StaticRouter context prop
    4. Creating Isomorphic React applications
      1. Webpack configuration
      2. Server-Side configuration
    5. Summary
  12. Using NativeRouter in a React Native Application
    1. Using NativeRouter in a React Native application
      1. Creating a new project with the create-react-native-app CLI
      2. Adding the <NativeRouter> component
    2. The <NativeRouter> component
      1. The initialEntries prop
      2. The initialIndex prop
    3. The <BackButton> component
    4. Creating Deeplinks with <DeepLinking>
      1. Ejecting from the create-react-native-app
      2. Adding <intent-filter> to the manifest file
      3. Including the <DeepLinking> component
    5. Summary
  13. Redux Bindings with connected-react-router
    1. State management with Redux
      1. Actions
      2. Reducers
      3. Store
      4. Redux in React
    2. Getting started with connected-react-router
    3. Reading state information from the Redux store
    4. Navigating by dispatching actions
    5. Summary
  14. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: React Router Quick Start Guide
  • Author(s): Sagar Ganatra
  • Release date: September 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789532555