Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
41 views5 pages

FEWD Unit5

React Router enables routing in React applications and allows navigation between component views by changing the browser URL. It installs via npm and requires importing necessary components like BrowserRouter, Route, and Switch. Switch ensures only one matching Route is rendered. Route parameters can be passed and extracted. Common HTTP requests are made via the Fetch API or libraries like Axios, which is more readable than Fetch.

Uploaded by

Dimple Gulla
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views5 pages

FEWD Unit5

React Router enables routing in React applications and allows navigation between component views by changing the browser URL. It installs via npm and requires importing necessary components like BrowserRouter, Route, and Switch. Switch ensures only one matching Route is rendered. Route parameters can be passed and extracted. Common HTTP requests are made via the Fetch API or libraries like Axios, which is more readable than Fetch.

Uploaded by

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

React Routing

1. React Routing and SPAs


Single Page Applications (SPAs) are web applications or websites that interact
with the user by dynamically rewriting the current page, instead of loading
entire new pages from a server. This leads to a smoother user experience.

React Router
React Router is a standard library for routing in React. It enables the navigation
among views of various components in a React Application, allows changing
the browser URL, and keeps the UI in sync with the URL.

Installation:
bash
npm install react-router-dom

Basic Usage:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
return (
<Router>
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/about" component={AboutPage} />
</Switch>
</Router>
);
}

2. Setting Up the Router Package


As shown above, you first need to install `react-router-dom` and then import
necessary components to set it up.

3. Switching Between Pages

Using the `Switch` component from `react-router-dom`, you can render only
the first `Route` that matches the current location. This is useful for defining
routes exclusively.

4. Passing and Extracting Route/Query Parameters

With React Router, you can pass parameters through the route path and extract
them in the receiving component.

// Defining a route with a parameter


<Route path="/user/:id" component={UserPage} />

// In the UserPage component, extracting the id parameter


function UserPage({ match }) {
const userId = match.params.id;
return <div>User ID: {userId}</div>;
}

5. Using Switch to Load a Single Route

As demonstrated above, the `Switch` component ensures that only one `Route`
gets rendered. If you have overlapping paths, only the first matching path will
be rendered.

6. HTTP Requests/Ajax Calls in React

To make HTTP requests in React, you can use the native Fetch API, or you can
use libraries like Axios.

Using Fetch:

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

7. Introduction of Axios package


Axios is a popular JavaScript library used to make HTTP requests. It's based on
promises and is more readable and flexible than the Fetch API.

Installation:

bash
npm install axios

Basic Usage:

import axios from 'axios';

axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});

HTTP GET Request and Fetching Data

With Axios, you can make a variety of HTTP requests like GET, POST, PUT, and
DELETE. Above, we've shown a basic GET request.
This should provide a concise overview and examples for the topics mentioned
in the image. For a deep dive, I'd recommend referring to official
documentation or comprehensive tutorials on each topic.

You might also like