Scribd
Upload
29 views

Lesson-8 - React Router

Uploaded by

khangpccse183245
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views

Lesson-8 - React Router

Uploaded by

khangpccse183245
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

REACT ROUTER AND SINGLE

PAGE APPLICATIONS
LESSON 8 – MR. MINH SANG

1
OBJECTIVES

 Set up the router module to enable navigation among multiple component views

 Set up the routes to enable the navigation

 Design SPA using React

 Use the React router to construct SPA

2
SINGLE PAGE
APPLICATIONS
(SPA) 3
TRADITIONAL WEB SITES

4
SINGLE PAGE APPLICATIONS

5
WHAT IS SINGLE PAGE APPLICATION?

 Web application or web site that fits in a single page


 No need to reload the entire page
 UX like a desktop/native application
 Most resources are retrieved with a single page load
 Redraw parts of the page when needed without requiring a full server roundtrip

6
CHALLENGES IN SPA

 Search engine optimization


 Partitioning the responsibility between client and server
 Maintaining history
 Analytics
 Speeding up the initial page load

7
REACT ROUTER
8
REACT ROUTER

 Collection of navigational components

 Enables navigation among views

 Router components, route matching components and navigation components

 Uses a browser-based bookmarkable URLs as an instruction to navigate to a client-


generated view in your web app
 Can also pass along optional parameters

9
WEB APP ROUTING

 Install react-router-dom
 Router component: <BrowserRouter>
 Enclose your app in <BrowserRouter> </BrowserRouter>

10
ROUTE MATCHING

 Route matching components: <Routes> and <Route>


 <Route>’s path prop enables specification of the current location’s pathname
 <Route>’s component prop specifies the corresponding view for the location
 Using exact attribute ensures that the path must be exactly matched
 <Route> enables grouping together several routes
 Sysntax: <Route path='/' element={component}></Route>

11
NAVIGATION

 Navigation is supported through the <Link> and <NavLink> components:


 <Link> creates links in your application
 Will render as <a> in the HTML
 <NavLink> also attaches the active class to the link when its prop matches the
current location

12
REACT
ROUTER:
PARAMETERS 13
REACT ROUTER

 Paths specified as a URL


 Paths can also carry parameter values: e.g., /menu/42 where 42 is a route parameter
 Route parameters specified in the path specification as a token
 e.g., path: ‘menu/:id’ where id is the token

14
ROUTE PARAMETERS

 Route parameters can be specified using a link parameter while specifiyng the link
 e.g., <Link to{`/menu/${dish.id}`} >
 Using ‘useParams’ Hook to returns an object of key/value pairs of the dynamic
params from the current URL that were matched by the <Route path>

15
EXERCISE 12: REACT ROUTER

 Install and configure your application to use React Router


 Configure the routes for React router to enable you to navigate to various pages
within your React application

16
SUMMARY

 Set up the router module to enable navigation among multiple component views

 Set up the routes to enable the navigation

 Design SPA using React

 Use the React router to construct SPA

17

You might also like