TIL/2021–02–10

Day 62: Treehouse Full Stack JavaScript Techdegree

React Router 4 Basics

React Router

• A popular React Library to manage navigation and rendering of components in your apps
• React itself doesn’t have built-in routing features — so many developers rely on React Router
• Designed specifically for React

What is Routing?

Single Page Apps (SPA)

• Web applications that display on a single web page
• The app’s HTML, CSS and JavaScript are only loaded once in the browser and the content changes dynamically as the user interacts with the app
• The app itself never reloads unless the user refreshes it

Routing is responsible for loading and unloading content while while matching the URL with the set of components being rendered

Routing should seamlessly link users to specify sections in your app

Routing in Single Page Apps should be consistent with the navigation experience of regular multi-page sites and apps — if it is not consistent user’s might encounter problems like visiting a broken link

— -

A good routing solution should keep track of browser history and seamlessly link users to specific sections in your app. True — Users should navigate a single-page app using the browser’s back and forward buttons, and a URL should always direct the user to the correct location

What is a single page app (SPA)? A web application that displays on a single web page. The HTML, JavaScript and CSS are loaded once by the browser and the content changes dynamically as users interact with the app.

In web development: Routing matches a URL with the set of components being rendered

React is a library concerned with only rendering UI. You’ll install additional libraries and add-ons for certain features; React Router is the official routing library

— — — -

Installing React Router and Declaring Routes

On the CLI:

rmr@RENZOs-MacBook-Pro course-directory % npm install — save react-router-dom

React Router DOM provides two components to get us started:

Browser Router — the root routing component that keeps our UI in sync with the URL

Route — responsible for rendering a component in our app when the URL matches its path

React Router lets us declare routes from anywhere in our component tree

On App.js lets first import React Router’s browser router and route

import { BrowserRouter, Route } from “react-router-dom”;

We begin declaring routes by rendering a router that wraps all our app’s components

So we will wrap the BrowserRouter component around our app

const App = () => (

<BrowserRouter>

<div className=”container”></div>

</BrowserRouter>

);

This renders the root router that listens to the URL changes and provides other react router components information about the current URL and which components to render — that way our UI is always in sync with the URL.

In React Router, we render components via the Route component

<Route path=”” component={}>

Path indicates the URL to match

Component specifies which React Component to render when the URL matches the Route path

import React from “react”;

import { BrowserRouter, Route } from “react-router-dom”;

import Home from “./Home”;

const App = () => (

<BrowserRouter>

<div className=”container”>

<Route path=”/” component={Home} />

</div>

</BrowserRouter>

);

And it works! Do not forget to import the component

Any Route we write in the App Container will render a child’s component when its path matches the URL

Next let’s declare a route for the about component

import Home from “./Home”;

import About from “./About”;

const App = () => (

<BrowserRouter>

<div className=”container”>

<Route path=”/” component={Home} />

<Route path=”/about” component={About} />

</div>

</BrowserRouter>

);

It is now rendering both the Home and About component s because the Router considers the route forward slash “/” route the same as the “/about” route — they both match the URL

To fix this we’ll need to add the exact prop to the Home route

<Route exact path=”/” component={Home} />

exact instructs the router to render the component only when the path matches the URL exactly — so when it is only the / route

So if we take a look at it now, it will only render the About component

Currently app just displays the content rendered by the Home and About components but the app’s header and main navigation should be present at all times. Like this:

Let’s import the Header component inside App

import React from “react”;

import { BrowserRouter, Route } from “react-router-dom”;

//App Components

import Header from “./Header”;

import Home from “./Home”;

import About from “./About”;

const App = () => (

<BrowserRouter>

<div className=”container”>

<Header />

<Route exact path=”/” component={Home} />

<Route path=”/about” component={About} />

</div>

</BrowserRouter>

);

export default App;

Now let’s create the routes for other components such as teachers and courses

import React from “react”;

import { BrowserRouter, Route } from “react-router-dom”;

//App Components

import Header from “./Header”;

import Home from “./Home”;

import About from “./About”;

import Teachers from “./Teachers”;

import Courses from “./Courses”;

const App = () => (

<BrowserRouter>

<div className=”container”>

<Header />

<Route exact path=”/” component={Home} />

<Route path=”/about” component={About} />

<Route path=”/teachers” component={Teachers} />

<Route path=”/courses” component={Courses} />

</div>

</BrowserRouter>

);

export default App;

And it works:

/teachers

/courses

— — -

Inline Rendering With Route

When a route’s path doesn’t match the URL the route renders null

Router doesn’t render the actual components to the DOM — they just manage what gets rendered

The render={} prop lets you do inline component rendering — we can pass it a function to the component we are rendering

<Route path=”/about” render={() => <About />} />

Now why would we prefer to use render instead of Component — it is used when we need to pass props to the component we are rendering

— -

Which <Route> prop renders a component only when the path matches the URL exactly? exact

Which react router component is responsible for rendering UI (or other components) ? <Route />

React Router uses JSX to declare routes. True. React router is a set of components, and the declarative syntax of JSX makes it easier to visualize how routes are structured

Which component is one of the core components of react router and keeps your UI in sync with the URL? <BrowserRouter>

Which route prop accepts an inline function that gets could when the URL and path match? Render