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