Introduction to react-router-dom

Introduction to react-router-dom

What is react-router-dom?

You may be curious about the role of React Router.

How does it contribute to app development?

And what is the precise function of a router, after all?

Typical Website Routing (Server-Side Routing):

• Involves requesting a new page from the server whenever a link is clicked.

• Provides a new page to the user for each request, resulting in full page refresh every time which is not performance-efficient!

Source: ​https://www.telerik.com/blogs/what-is-react-router-what-is-react-location

React Website Routing
(Client-Side Routing):

• Prevents server requests whenever a link is clicked hence no page refresh even when the URL changes.

• Components are rendered based on the current URL without making server requests providing dynamic content without full page reloads.

Source: ​https://www.telerik.com/blogs/what-is-react-router-what-is-react-location

Single Page Application (SPA)

A Single Page Application (SPA) is a type of website where everything happens on a single page.

SPAs dynamically updates its content by dynamically fetching new data from the web server/back-end in response to user interactions.

Instead of loading entirely new pages, SPAs show or hide specific components when needed.

Anatomy of a Single Page Application (SPA)

react-router-dom

React Router is a popular library in the React ecosystem that provides a powerful and flexible way to handle routing and navigation in web applications. It allows you to build single-page applications (SPAs) easily!

react-router-dom concepts

There are three primary categories of components in React Router:

• Routers, like <BrowserRouter> and <HashRouter>

• Route Matchers, like <Route> and <Switch>

• Navigation or Route Changers, like <Link>, <NavLink>, and <Redirect>

react-router-dom concepts

Routers: React Router component like BrowserRouter manages the routing process.

In this example:
Typically rendered at the root of your element hierarchy. You’ll wrap your top-level <App> element in a router, like the shown in the example (index.js).

react-router-dom concepts

Route Matchers-> Uses Declarative Configuration to configure routing, where you specify which components to render for specific URLs.

In this example:

- When the user visits the home page at http://localhost:3000/, the RecordList component will be displayed.

- When the user navigates to http://localhost:3000/create, the Create component will be shown instead!

react-router-dom concepts

Navigation or Route Changers -> provides components like Link and NavLink, making it easy to create navigation links that automatically handle route changes when users click on them.

In this example:

- When the user click on the Home Link, the Route Matchers will pick up the "/" url path and attempt to match it to the corresponding component depending on the <Routes> paths.

react-router-dom concepts

URL Params -> Params are placeholders in the URL that begin with a colon, like the `:id` param defined in the route in this example.

In this example:

- URL parameters are helpful for accessing dynamic parts of the URL, such as fetching a specific record based on an ID parsed from the URL.

Scenario: React Router example

In this example, we will explore how React Router is commonly used to implement routing and navigation.

Step 1: install and setup react-router

1. Install bootstrap and react-router using the command `npm install bootstrap react-router-dom`

2. In your index.js file, import BrowserRouter, then wrap your root App component with the BrowserRouter component

Step 2: Generate the 4 components

Generate the following components using the command:
`npx generate-react-cli component {ComponentName}`

Step 3: Setup Navigation in Navbar

1. Import NavLink navigation/route changer from react-router-dom

2. Create navbar using NavLink

Step 4: Setup route matchers in app.js

1. Import Create and Home Components

2. Import Route and Routes route matchers to configure the router (Matches the URL to Corresponding Component!)

Step 5: Test that the routing is working !

Multiple Choice

What does SPA stand for in the context of web development?

• Server Page Application

• Single Page Application

• Simple Page Application

• Static Page Application

Multiple Choice

Which React Router DOM component is used to define a route in your application?

• <Route>

• <Link>

• <Router>

• <Switch>

Multiple Choice

What is the main difference between Server-side and Client-side routing?

• Server-side routing relies on the server to process requests and send back new pages, while client-side routing uses JavaScript to update content on the same page.

• Server-side routing uses JavaScript for navigation, while client-side routing sends requests to the server for each page change.

• Server-side routing is primarily used in Single Page Applications (SPAs), while client-side routing is suitable for traditional web applications.

• Server-side routing offers a faster and smoother user experience compared to client-side routing.

Multiple Choice

What is the main advantage of client-side routing in a web application?

• No page refresh during navigation

• Improved security

• Faster server response times

• Better SEO optimization

Multiple Choice

What is the purpose of BrowserRouter in React Router?

• It defines the routes for server-side routing in a React application.

  
  

• It is used to create browser-specific components in React.

• It configures the browser's default behavior for navigation in a React application.

• It sets up a router and manages the routing process in a React application.

Multiple Choice

What is the purpose of Route Matchers in React Router?

• They validate user input in forms

• They match URLs to components

• They define server-side routes

• They filter incoming HTTP requests

Multiple Choice

How can you navigate to a specific route using React Router?

• Manually update the URL in the browser's address bar

• Use the <a> tag with the href attribute

• Call the window.navigate() function

• Use the <Link> component

Multiple Choice

Which component is used to define a route in React Router?

• <Navigate>

• <Route>

• <Link>

• <Router>

Multiple Choice

What is the primary purpose of URL params in React Router?

e.g., /item_:id

• To store sensitive data in the URL

• To create complex route patterns

• To pass dynamic data through the URL

• To specify route transitions

Multiple Choice

In React Router, how do you access and extract URL params from a route?

• Use the useLocation hook

• Use the useParams hook

• Use the useHistory hook

• Use the useEffect hook