React Router Quick Start Guide · Routing in React Applications Made Easy by Ganatra, Sagar -- Read -- Imperial Library of Trantor

Index

Title Page Copyright and Credits

React Router Quick Start Guide

Packt Upsell

Why subscribe? packt.com

Contributors

About the author About the reviewer Packt is searching for authors like you

Preface

Who this book is for What this book covers To get the most out of this book

Download the example code files Download the color images Conventions used

Get in touch

Reviews

Introduction to React Router 4 and Creating Your First Route

A brief look at React

Component-based architecture in React Creating a React component

Introduction to React-Router Getting started with React-Router

Adding the React-Router library Defining application routes

Summary

Configuring Routes - Using Various Options in the Route Component

Route props

The exact prop The strict prop The sensitive prop Inline rendering with the render prop Inline rendering with the children prop

Route component props

History The location object The match object

Route parameters Nested routes and dynamic routing Dynamic routes from JSON Summary

Using the Link and NavLink Components to Navigate to a Route

<Link> component

replace prop innerRef prop to prop with an object

<NavLink> component

activeClassName prop activeStyle prop exact prop strict prop isActive prop location prop

Navigating to nested routes Navigating to a route programmatically using history Using the withRouter higher–order component Preventing transitions with <Prompt> Summary

Using the Redirect and Switch Components

The <Redirect> component

The to prop The push prop

Protecting routes and authorization

Redirecting with a callback route

Exclusive routing with the <Switch> component

Ordering of the <Route> components in <Switch>

<Route> with path '/' as the first child in <Switch> <Route> with path params

Adding a 404 – Page Not Found  Using <Redirect> in <Switch> to redirect to a Page Not Found page Redirecting from an old path to a new path

Summary

Understanding the Core Router, and Configuring the BrowserRouter and HashRouter components

<Router> component

Including <Router> from react-router react-router package react-router-dom package

<BrowserRouter> component

basename prop forceRefresh prop keyLengthprop getUserConfirmation prop Showing a custom dialog box using the getUserConfirmation prop

<HashRouter> component

hashType prop

Summary

Using StaticRouter in a Server-Side Rendered React Application

Performing SSR of a React application using Node.js and Express.js

Installing dependencies Webpack build configuration Server-Side application Rendering a React application using ReactDOMServer.renderToString

Adding <StaticRouter> and creating routes

Server-Side redirect using the <Redirect> and staticContext Request URL matching with matchPath

StaticRouter context prop Creating Isomorphic React applications

Webpack configuration Server-Side configuration

Summary

Using NativeRouter in a React Native Application

Using NativeRouter in a React Native application

Creating a new project with the create-react-native-app CLI Adding the <NativeRouter> component

The <NativeRouter> component

The initialEntries prop The initialIndex prop

The <BackButton> component Creating Deeplinks with <DeepLinking>

Ejecting from the create-react-native-app Adding <intent-filter> to the manifest file Including the <DeepLinking> component

Summary

Redux Bindings with connected-react-router

State management with Redux

Actions Reducers Store Redux in React

Getting started with connected-react-router Reading state information from the Redux store Navigating by dispatching actions Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

← Prev
Back
Next →

← Prev
Back
Next →