React Router
• React Router is an open-source application programming
interface (API)/standard library for Routing in React apps. It
helps routers create and navigate among different website
URLs that build your web app.
• They are for simplifying site navigation and enabling users to
roam between the components of a web application while
preserving the state.
• React Routers use dynamic and client-side routing; everything
is a component in React Router while your app is rendering.
• It helps support creating a single-page web application (SPA)
while requiring no page refreshing when the user navigates.
• These Routers can also provide unique URLs for all active web
app components, making them more shareable.
Various Packages in React Router
Library
• React Router library comes with three different packages
concerning npm, and each has its purpose –
• react-router-dom
• react-router
• react-router-native
• The react-router package is for peer dependency to the other two
packages mentioned above.
• For React apps, the react-router-dom package is used for
routing. And the react-router-native comes with bindings that
ones use for developing React Native apps.
React Router provides three different kinds of
routers:
The main Components of React Router are:
Nested Routes in React Router v5
• use of nested routes in v5 that requires strict string matching logic.
However, in the new version (v6) they have eliminated the need for
the string matching logic and useRouteMatch() as shown below.
routing.pptx
routing.pptx
routing.pptx
routing.pptx
routing.pptx

routing.pptx

  • 1.
    React Router • ReactRouter is an open-source application programming interface (API)/standard library for Routing in React apps. It helps routers create and navigate among different website URLs that build your web app. • They are for simplifying site navigation and enabling users to roam between the components of a web application while preserving the state.
  • 2.
    • React Routersuse dynamic and client-side routing; everything is a component in React Router while your app is rendering. • It helps support creating a single-page web application (SPA) while requiring no page refreshing when the user navigates. • These Routers can also provide unique URLs for all active web app components, making them more shareable.
  • 3.
    Various Packages inReact Router Library • React Router library comes with three different packages concerning npm, and each has its purpose – • react-router-dom • react-router • react-router-native • The react-router package is for peer dependency to the other two packages mentioned above. • For React apps, the react-router-dom package is used for routing. And the react-router-native comes with bindings that ones use for developing React Native apps.
  • 4.
    React Router providesthree different kinds of routers:
  • 7.
    The main Componentsof React Router are:
  • 11.
    Nested Routes inReact Router v5
  • 12.
    • use ofnested routes in v5 that requires strict string matching logic. However, in the new version (v6) they have eliminated the need for the string matching logic and useRouteMatch() as shown below.