React Router - PoliTO
[Pages:30]React Router
Applications have more than one page...
Fulvio Corno Luigi De Russis Enrico Masala
Applicazioni Web I - Web Applications I - 2020/2021
Outline
? Objective and problems ? A Solution, the React way: React Router
2
Applicazioni Web I - Web Applications I - 2020/2021
Full Stack React, chapter "Routing" React Handbook, chapter "React Router"
Multi-page Single Page Applications
OBJECTIVES AND PROBLEMS
3
Applicazioni Web I - Web Applications I - 2020/2021
Supporting Complex Web Applications
? Switching between many different page layouts ? Managing the flow of navigation across a set of "pages" ? Maintaining the default web navigation conventions (back, forward,
bookmarks, ...) ? Allowing URLs to convey information ? Allowing re-loading KBs of JavaScript at every page change ? Keeping the state across page changes ?...
4
Applicazioni Web I - Web Applications I - 2020/2021
Example
? Different layout and contents
? Some common parts
? No "page reload" ? URL changes
accordingly
5
Applicazioni Web I - Web Applications I - 2020/2021
Some Use Cases
? Master list / detail view ? Logged / Unlogged pages ? Sidebar navigation ? Modal content ? Main Contents vs. User Profile vs. Setting vs. ...
6
Applicazioni Web I - Web Applications I - 2020/2021
Using URLs for Navigation State
? URLs determine the type of the page or the section of the website
? Changing page Changing the URL
? URLs also embed information about the item IDs, referrers, categories, filters, etc.
? URLs can be shared/saved/bookmarked, and they are sufficient for rebuilding the whole exact page
? Deep Linking
? Back and Forward buttons navigate the URL history
Applicazioni Web I - Web Applications I - 2020/2021
Example URLs on : / /profile.name /profile.name /posts/12341232124 22123 /pagename /pages/?category=y our_pages
7
Using URLs for Navigation State
? URLs determine the type of the page or the section of the website
? Changing page Changing the URL
? URLs also embed information about the idem IDs, referrers, c?atWegithoarniyeUsR,Lf, itlhteeRresa,cteatpcplication will always return the
? URLs can be ssahmaerpeagde/(siandveexd.h/tbmlo/oinkdmexa.jrsk)ethda,t wainll ldoatdhanedy are sufficient formroeubntutihledsianmge Atphpe whole exact page
? Deep Link?inTghe URL is queried by the App to customize the render
? Back and Forward buttons navigate the URL history
Applicazioni Web I - Web Applications I - 2020/2021
Example URLs on : / /profile.name /profile.name /posts/12341232124 22123 /pagename /pages/?category=y our_pages
8
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- react router get current path
- react router get path
- react router current url
- react router location
- react router get current route
- react router current route
- react router url parameter
- react router get parameters
- react router dom url params
- react router query parameter
- react router pass parameter
- react router path parameter