URL Parameter Handling in React

  In React, we often need to handle parameters within the URL to represent dynamic information, such as user IDs, product categories, or specific pages. Below, we'll explore how to do this using the `useRouter` hook from Next.js (if you're using this framework) or `useParams` from React Router.

What are URL Parameters?

  URL parameters are segments of the URL that allow web applications to receive dynamic and specific information. These parameters are generally defined in the URL path, such as `/product/:id` or `/user/:username`.

  Let's see how to access these parameters in React with Next.js's `useRouter` hook.

import { useRouter } from 'next/router';

const Product = () => {
  const router = useRouter();
  const { id } = router.query;

  return <h1>Product ID: {id}</h1>;
};

  In the example above, we use `useRouter` to access the `id` parameter from the URL. When the URL changes, React will automatically update the component with the new parameter value.

Handling Parameters with React Router

  If you are using React Router, you can access URL parameters using the `useParams` hook. This hook returns an object with the parameters you defined in your routes.

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

const Product = () => {
  const { id } = useParams();

  return <h1>Product ID: {id}</h1>;
};

  In this example, we use `useParams` to get the `id` parameter from the application's URL. This method is very useful when working with routes defined in React Router.

Combining URL Parameters with Conditional Rendering

  It's common to combine URL parameters with conditional rendering. For example, if a parameter is invalid or not present, we can display an error message or redirect the user.

import { useRouter } from 'next/router';

const Product = () => {
  const router = useRouter();
  const { id } = router.query;

  if (!id) {
    return <h1>Error: Product ID is required</h1>;
  }

  return <h1>Product ID: {id}</h1>;
};

  In this case, we display an error message if the `id` parameter is not present in the URL.