React Routing - UsmanLive

[Pages:19]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

Add router to Your app Component

import { BrowserRouter as Router, Route, Link } from "react-routerdom"; // at Top

Your app Component Should look like this

Usman Akram

CUI LAHORE

5

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

6

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

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

Why ?

Usman Akram

CUI LAHORE

7

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

8

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

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

Google Online Preview   Download