Learning and Knowledge Management

REACT JS
ROUTING IN REACT
Ground Rules
For a successful class, please:
• Arrive on time.
• Turn off cell phones.
• Assist your colleagues; show respect to all individuals regardless of their skill and
knowledge level.
• Do not use class time to surf the net, check e-mail, or use instant messaging.
• Adhere to attendance policy as directed by your local training coordinator.
• Make the most of face-to-face training; ask questions and share your own insights and
expertise.
• Leave the room only during break times or in the event of an emergency.
• Manage expectations for your other responsibilities.

2
Agenda
1 Understand what is router, why router is
required

2 How to achieve router

3 Child Router

4 Demo

5 Activity

6 Passing Parameters

3
Introduction to Routing
• React Router is a standard library for routing in React.

• It enables the navigation among views of various components in a React

• Application, allows changing the browser URL,

• keeps the UI in sync with the URL.

• Before the react router v4 it is static after v4 it is Dynamic.

4
Introduction to Routing

Single page applications are todays most

popular requirement in any application
design which makes navigation easier

React provides the routing concept using

which we can create single page
applications

React provides mainly three packages to

use routing concept.
3

5
Introduction to Routing (Cont.…)

react-router- react-router-
react-router
dom native

This package
provides environment This package provides
This package provides specific environment specific
core functionalities to functionalities and functionalities and
achieve routing in components which components which
react are useful to run are useful to run
application on application for mobile
browser
3

6
Introduction to Routing (Cont.…)

In this section we will focus on installing

and using react-router-dom library to
design web application

The following command is used to install

router library
“npm install react-router-dom”

Once the above library is installed we can

use the functionalities related to router
and achieve the routing in our application

7
Introduction to Routing (Cont.…)
There are some basic functionalities are
required to achieve routing in an application,
these will be achieved in a proper steps

Step 1
Identify which type of
router is required
depending on type of
application. There are
only 2 choices either
react-router-dom or
react-router-native
Step 2
Step 3
Identify how many
Corresponding to the
components are
routes which are
present inside
provided in step2, the
application, based on
view of an application
that we must create
must be adjusted. This
route’s which will have
will allow a user to click
path(url) and
on respective link to
corresponding
display component
component to display

8
Introduction to Routing (Cont.…)
These steps can be achieved using different
routing functions from react-router-dom
library

Step 3
Step 1 Step 2
This can be achieved
This can be achieved This can be achieved
using
using using
<Link>
<Router> <Route>

9
 Introduction to Routing (Cont…) - <Router>
• The common low-level interface for all router components.
• Typically apps will use one of the high-level routers instead
• Below are the different types of Router

• <BrowserRouter> - uses the HTML5 history API to keep your UI in sync with the URL.

• <HashRouter> - uses the hash of URL to memorize all things and support old browsers or the React application using
client-side Router

• <MemoryRouter> A <Router> that keeps the history of your “URL” in memory. Useful in tests and non-browser
environments like React Native

• <NativeRouter> A <Router> for iOS and Android apps built using React Native.

• <StaticRouter> useful in server-side rendering scenarios name: static. It’s also useful in simple tests when you just need
to plug in a location and make assertions on the render output.

10
Introduction to Routing (Cont…) - <BrowserRouter>

This is very useful in understanding url and

handle dynamic requests. This will contain all
route related information within it

This will be imported from react-router-dom

library either using the same name or by
providing alias name during the import

Import {BrowserRouter} from ‘react-router-

dom’
Or
Import {BrowserRouter as Router} from ‘react-
router-dom’

11
Introduction to Routing (Cont…) - <Route>
Using this one can provide all route
information. This will be imported using
Import {Route} from ‘react-router-dom’

The Route element will have “path” and

“component”.
“path” will have url or location and
“component” will have name of the component

When the path is matched with appropriate url

or location then the respective component is
rendered

12
Introduction to Routing (Cont…) - <Link>
This element is mainly used to provide user a
way to click on the link so that appropriate
component can displayed on the view

This will be imported using

Import {Link} from ‘react-router-dom’

Link element will have one of the important

attribute known as “to”. Here one must mention
the path of a component

13
Demo -- Routing
Create new react project
create-react-app reactexample

Install react library

npm install react-router-dom

14
Demo – Routing (Cont.…) - Explanation
Inside index.js

BrowserRouter is
used here as the
application is
created to execute
on the browser.
Also the alias name
is provided as
Router

15
Demo – Routing (Cont.…) - Explanation
Inside index.js

This is required to
provide route details

Route element will

have path which
provides url/ location
details. The Route
element will also
have name of a
component, which
will be rendered
when the
corresponding path
is matched
16
Demo – Routing (Cont.…) - Explanation
Inside index.js

Router element will

contains all route
details required for
the application.
Router element can
have only one child
element, here it is
div element

17
Demo – Routing (Cont.…) - Explanation
Create new component NavigationBar.js
This is required to
provide view section
to user, so that a user
can click on
whichever
component he/she
wants to navigate
Link element have
“to” which matches
the path provided in
Route element. Link
element also have
text to display on the
view which can be
seen by the user and
click on the link to
navigate

18
Demo – Routing (Cont.…)
Inside App.js

The NavigationBar
component is
rendered here
Demo – Routing (Cont.…)
Output
Demo – Routing (Cont.…)
Output when clicked
on Home Link
Demo – Routing (Cont.…)
Output when clicked
on Customer Link
Routing with child routes
In the previous module we have
discussed how to achieve routing in react
using react-router-dom library

In this module we will focus on routing

with child routes and also we will see how
to pass parameters
Routing with child routes (Cont…)
Nesting components is a technique where
one component will be placed inside
another component

Routing in react provides a way to

navigate nested components by routing
with child routes and also keeping the
application as single page application

As discussed in the Module 6.1 routing in

react uses 3 main functionalities
<BrowserRouter>, <Route> and <Link>

In this module we will use react-router-

dom to utilize router features in the web
application
Demo – Routing with child routes (Cont…) --
Explanation
Route information are provided inside index.js
corresponding to App, Home and About
components

If the path for App

component is
mentioned as
<Route exact path=“/”>
Then the app
component will display
only if the url is
“localhost:3000”. In
other cases it will not
display
3

25
Demo – Routing with child routes (Cont…) --
Explanation

26
Demo – Routing with child routes (Cont…) --
Explanation
Links are provided in App.js , which are seen by
the user. And user can click on any one of the
link

These links are

displayed on the view,
when the user clicks
on any of the link
respective
component is
displayed
Demo – Routing with child routes (Cont…) --
Explanation
Further we created 2 more custom
components
NewIT and Digital
Demo – Routing with child routes (Cont…) --
Explanation
Created NavigationSection component
which will provide links for NewIT and Digital
components. These will be childs for About
component

As NewIT and Digital

will be childs for
About component
Demo – Routing with child routes (Cont…) --
Explanation
The NavigationSection component is
rendered inside About component

The Links are

displayed as part of
About component
Demo – Routing with child routes (Cont…) --
Explanation
Route information are provided inside index.js
corresponding to NewIT and Digital child
components

About acts like parent

component and
NewIT and Digital are
childs for About
components. Hence
the path is referred
using About
component
Demo – Routing with child routes (Cont…)

Output
Demo – Routing with child routes (Cont.…)

Output when clicked

Home Component
Demo – Routing with child routes (Cont.…)

Output when clicked

About Component
Demo – Routing with child routes (Cont.…)

Output when clicked

NewIT Component
Demo – Routing with child routes (Cont.…)

Output when clicked

Digital Component
Activity 1

Please Refer the Activity Document 1

Passing Parameters Routing - <Route>

ReactDOM.render(
<Router>
<Route path="/" component={App}></Route>
<Route path="/product" component={Product}></Route>
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contact}></Route>
<Route path="/product/productdetails/:pname/:pid/:manf/:price"
component={ProductDetails}></Route>
</Router>, document.getElementById('root'));

pname, pid, manf and price

are parameters which will
be send to the
productdetails component
Passing Parameters Routing – <Link>

<td><Link to={
`/product/productdetails/
${product.name}/ When the user clicks
${product.productno}/ on the link then
${product.manufacturer}/ corresponding
${product.price} parameter will be sent
`
}>{product.productno}</Link></td>
Passing Parameters Routing - match

A match object contains information about how a <Route path> matched the URL
• params - Key/value pairs parsed from the URL .
• isExact - For exact URL Matching returns true.
• path - Pattern used to match, Used in Nesting of URL as well.
• url - The matched portion of the URL.

<label>Product Name : </label>{this.props.match.params.pname}<br/>

<label>Product Number :</label>{this.props.match.params.pid}<br/>
<label>Product Manuf :</label>{this.props.match.params.manf}<br/>
<label>Product Price</label>{this.props.match.params.price}<br/>

Displays which
parameter is passed from
Digital component
Module Summary
Now, you should be able to:
• What is router
• Importance of router
• How to configure router
• Child Router
• Passing Parameter

41
Thank You

42