Phase 2-Let's Talk About React Router

Phase-2 Let’s Talk About React Router

What is Client-Side Routing?

• Client Side Routing - handles all the routing logic with JavaScript, without additional GET requests for some new HTML document
• Single-Page Application (SPA) - one HTML document for the entire app
• The server is not responsible for handling the routing, fetching, and displaying. The client side is responsible
• This enables faster user experiences because the browser doesn’t need to request an entirely new document
• Also enables a more dynamic user experience with things like animation

  Are There Any Limitations?

• The first page can take a longer time to load if the app is big
• SPA doesn’t have pages, in the traditional sense, which makes it harder for analytical tools to track page views
• Harder to design compared to multi-page applications

What is React Router?

• React Router - a JavaScript framework that lets us handle client and server-side routing
  • Reacts’ most popular client-side routing library

Core Features

• Conditional rendering of components based on URL
  • When the URL is /home, the <Home> component is displayed
• Programmatic navigation using JavaScript
  • When the home page link is clicked, the URL changes to /home, and content is updated without making a new request for a new HTML
• All of the features of React Router build on top of other features that are already built into JavaScript via different web APIs, like location and history
  • Location API
    • window.location; - returns location object with useful info about the current page
  • Window API
    • window.history; - returns how many locations you have visited in this window session
    • window.history.back(); - takes you to last location
    • window.history.forward(); - takes you forward
    • window.history.pushState(); - programmatically navigate to a new page

How To Use React Router

This example is from React Router Docs.

• First, install create-react-app to make a new project

npm create-react-app my-app 
cd my-app

• Next, install React Router
  • In this example, we are using react-router-dom since we are building a web app

npm add react-router-dom

• 3 pages are handled by the router
  • Home
  • About
  • Users
• As you click on the <Link>s, the router renders the matching <Route>

3 Primary Components

• Routers (Currently Does Not Support Data APIs)
  • <BrowserRouter>
    • Uses regular URL paths
    • Your web server needs to serve the same page at all URLs that are managed client-side by React Router
  • <HashRouter>
    • Stores the current location in the hash portion of the URL
  • Differences - the way they store the URL and communicate with your web server

• Router Matchers
  • <Switch> No longer used in v6
    • When <Switch> is rendered, it searches through its children (<Route>) elements to find and match its path with the current URL
  • <Routes>
    • Replaced <Switch>
  • <Route>
    • This element’s props are read to create a route by <Routes>
  • More on routes below

• Navigation / Route Changers
  • <Link>
    • Creates links in your application

  

  • <NavLink>
    • A superset of <Link>, adding styling attributes to a rendered element when it matches the current URL

  

  • <Redirect>
    • Forces navigation

  

Picking a Router - Supports the new data APIs

• createBrowserRouter
  • It uses the DOM History API to update the URL and manage the history stack
• createHashRouter
  • Instead of using normal URLs, it will use the hash portion of the URL to manage the “application URL”
• History Stack - As the user navigates, the browser keeps track of each location in a stack

  Nested Routes

• Nested Routes
  • Allows multiple components to render on the same page
  • Defines routes in a hierarchical manner - a single URL can match multiples routes in a nested branch of the tree
    • A parent route can have child routes
      • Each child route represents a portion of the URL

Nested Routes Visual-Click Me!

Routes, Route, Switch

• <Routes>
  • Whenever the location changes it looks through all its child routes to find the best match and renders that branch of the UI
  • Outermost component
  • Wraps multiple <Route> components
• <Route>
  • The <Route> component takes in a path and element prop
  • The path value holds the route path
  • The element value holds a pointer to a component or a page
• <Switch>
  • Has nested Route components that need exact paths
  • Renders the first child <Route> that matches the location

What Are Hooks?

• Hooks - Allow access to state of the router and perform navigation from inside of the components
  • useHistory
    • Access to the history
  • useLocation
    • Returns the location object that represents the current URL
  • useParams
    • Returns an object of key/value pairs of URL parameters
  • useRouteMatch
    • Attempts to match the current URL in the same way that a would

      What About Errors?

• Most errors are handled automatically by React Router

Sources

React Router Docs v5
React Router Docs v6