React Routing - UsmanLive

[Pages:18]React Routing

Routing

Route Parameters Query String Redirect Not Found Pages Nested Routing

Usman Akram

CUI LAHORE

2

Grab The Code



As Usual A start and a Finish Project

Two apps

Vidly Router-App

Usman Akram

CUI LAHORE

3

npm install react-router-dom

import { Route, Switch, Redirect } from "react-router-dom"; everything is a component in React Router 2,545,456 Weekly Downloads

Usman Akram

CUI LAHORE

4

Write a Switch in App.js

//NotFound is a component. //which will be rendered when you redirect to //localhost:3000/not-found

Usman Akram

CUI LAHORE

5

import { Link } from "react-router-dom";

Home Use Link component which is a built in component instead of Home

Why ?

Usman Akram

CUI LAHORE

6

Route Props

Route Component is a Router around the component which will be rendered against a url

Route will inject additional props

History Location Match

Usman Akram

CUI LAHORE

7

Router Docs

Usman Akram

CUI LAHORE

8

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download