React Router Quick Start Guide

Routing in React applications made easy

Sagar Ganatra

• Publisher: Packt Publishing
• Year: 2018
• ISBN:
  9781789532838
• Edition: 1
• Topic: Informatique
• Subtopic: Développement Web

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

Using StaticRouter in a Server-Side Rendered React Application

Server-Side Rendering (SSR) is a technique of rendering client-side only single-page applications (SPAs) on the server and sending the fully rendered page as a response to the user's request. In client-side SPAs, the JavaScript bundle is included as a script tag, and, initially, no content is rendered in the page. The bundle is first downloaded, and then the DOM nodes are populated by executing the code in the bundle. There are two downsides to this—on poor connections, it might take more time to download the bundle, and the crawlers that don't execute JavaScript will not be able to see any content, thus affecting the page's SEO.

SSR solves these problems by loading HTML, CSS, and JavaScript in response to the user's request; the content is rendered on the server and the final HTML is given to the crawler. A React application can be rendered on the server using Node.js and the components available in React-Router can be used to define routes in the application.

In this chapter, we will take a look at how React-Router components can be used in a server-side rendered React application:

• Performing SSR of a React application using Node.js and Express.js
• Adding <StaticRouter> component and creating routes
• Understanding the <StaticRouter> props
• Creating Isomorphic React applications by rendering the first page on the server and then allowing the client-side code to take over the rendering of subsequent pages

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

In this example, we will use Node.js and Express.js to create a server-side application that will render the React application on the server. Node.js is a cross-platform JavaScript runtime environment for servers and applications. It is built on Google's V8 JavaScript engine, and it uses an event-driven, non-blocking I/O model, which makes it efficient and lightweight. Express.js is one of the most popular routing and middleware web-framework modules used in the Node.js environment. It allows you to create middleware that helps with handling HTTP requests from clients.

Installing dependencies

Let's first create a server-side application using the npm init command:

npm init -y

This will create a file, package.json, with default values for various fields. The next step is to add dependencies:

npm install --save react react-dom react-router react-router-dom express

The preceding command will add all the necessary libraries to the dependencies list in the package.json file. Please note that we are not creating a React application using the create-react-app CLI; instead, we will add the required dependencies and write the configuration files for building the application.

To build the application, the following dev dependencies are added to the devDependencies list:

npm install --save-dev webpack webpack-cli nodemon-webpack-plugin webpack-node-externals babel-core babel-loader babel-preset-env babel-preset-react 

The preceding command will add the libraries required to build the application for the devDependencies list in the package.json file.

The next step is to write a build configuration, so that the server-side application can be built.

Webpack build configuration

This is from Webpack's documentation:

At its core, WebPack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.

Webpack has become the de facto standard for creating bundles for JavaScript applications. The create-react-app CLI includes scripts that internal...

Table of contents

• Title Page
• Copyright and Credits
• Packt Upsell
• Contributors
• Preface
• Introduction to React Router 4 and Creating Your First Route
• Configuring Routes - Using Various Options in the Route Component
• Using the Link and NavLink Components to Navigate to a Route
• Using the Redirect and Switch Components
• Understanding the Core Router, and Configuring the BrowserRouter and HashRouter components
• Using StaticRouter in a Server-Side Rendered React Application
• Using NativeRouter in a React Native Application
• Redux Bindings with connected-react-router
• Other Books You May Enjoy