Handling Asynchronous Data Fetching in Route Components

Illustrate a method for handling asynchronous data fetching within a component rendered by React Router, including loading states and error handling.
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
Import necessary hooks from React and React Router DOM.
const fetchData = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Data could not be fetched!');
    return await response.json();
  } catch (error) {
    throw error;
Define a function for fetching data asynchronously from a given URL.
function RouteComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const { id } = useParams();
  useEffect(() => {
      .then(data => {
      .catch(error => {
  }, [id]);
Create a functional component that uses the useState and useEffect hooks from React to fetch data based on the URL parameter 'id'.
if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  return (
      <h1>Data Details</h1>
Add conditional rendering inside the component to handle loading and error states, and display data once it's fetched.
export default RouteComponent;
Export the component for use in your application.