React Router- Params

Params is an important feature of React Router, which helps to retrieve data from URLs through Dynamic Router. When creating a dynamic route, the parts that are variable are accessed with params.

Example: Github

We are not fetching all data in a single component, and not passing to another component. But we are setting the route and link. When a user clicks on a specific link then we again fetching our required data.

How Data Flow Works:

1. Home Component:

   • The Home component renders a list of users.
   • Each user has a link associated with them (using the <Link> component).
   • When a user clicks on one of the links, it directs them to the UserDetails page for that specific user.
   • No data is fetched here; it's just a list of links to other pages, each representing a user with a unique id.

2. Routing (via React Router):

   • React Router's job is to map the URL to a specific component.
   • In the example, we have a route defined as /user/:id, which matches any URL that follows the pattern /user/1, /user/2, etc.
   • This :id part of the path is a dynamic parameter that can change depending on which user was clicked.

3. UserDetails Component:

   • When the user clicks on a link (e.g., /user/1), the URL changes.
   • React Router renders the UserDetails component because of the /user/:id route.
   • In the UserDetails component, we use useParams() to extract the id from the URL (e.g., id = 1).
   • The component then fetches the data specific to that id (e.g., an API call to get user details for id = 1).
   • The data is fetched and displayed only when the UserDetails page is accessed, not before.

---

Key Points:

• Data fetching is done lazily:
  • Data is fetched only when the specific user details page is accessed.
  • No need to fetch all data upfront for all users.
• Dynamic routing:
  • The URL contains the id, and based on that id, the relevant data is fetched.
• Components are separated:
  • Home doesn't need to know about the data fetching for individual users. It just renders the links.
  • UserDetails handles both receiving the id from the URL and fetching the data associated with that id.

Params

The dynamic part of the URL is called Params in React. It is very flexible and helps to create re-useable root. The developer can capture value from the URL and use it to render the component.

• How Pramps works:
• 1. Define Params in Route: In react using : symbol developers can create a dynamic statements. <Route path="/user/:id" element={<UserDetails />} /> Here, :id is a dynamic param and the URL will be /user/1. Or based on the selected element.
• 2. Extract Params:

import { useParams } from "react-router-dom";

const UserDetails = () => {
  const { id } = useParams(); // Extracting/destructuring id from params
  return <div>User ID: {id}</div>;
};

• 3. Navigate Route using params:
  <Link to="/user/1">Go to User 1</Link>

• 4. Use Cases of Params:

• Displaying Specific Data: Fetch and display data for a specific user, post, or item using the id param.
  

useEffect(() => {
  fetch(`https://api.example.com/users/${id}`)
    .then(response => response.json())
    .then(data => setUser(data));
}, [id]);

1. Dynamic Routing: Create reusable routes like /products/:productId, /blog/:slug, etc., where you don't need a separate route for each item.
2. Navigation Based on State: Pass values in the URL to keep state persistent across pages.

Key Points
Params are dynamic: They make routes flexible by capturing values directly from the URL.
Access with useParams: React Router’s useParams hook gives easy access to these values.
Reusable routes: A single route definition (e.g., /user/:id)can handle multiple URLs (/user/1, /user/2, etc.).
No need for props: Params allow you to avoid passing data via props when the information is already available in the URL.
By using params, you can make your React application dynamic and user-friendly while ensuring better maintainability of your routes.