How to Handle Alphanumeric IDs in React Router and Axios for API Requests?

`I’m working on a React project where I need to fetch anime information based on an alphanumeric ID from the URL. The ID can contain letters, numbers, and special characters (e.g., high-school-dxd-1834).

I’m using react-router-dom to extract the ID from the URL and axios to make the API request. While the setup works perfectly with numeric IDs (e.g., 1234), it fails with alphanumeric IDs (e.g., high-school-dxd-1834).

Here’s what happens:
With Numeric IDs:

URL: http://localhost:3000/anime/1234
The ID 1234 is extracted correctly and the API request succeeds, returning the expected anime information.
API request: https://mellieapi2.vercel.app/anime/info?id=1234
Status: 200 OK
With Alphanumeric IDs:

URL: http://localhost:3000/anime/high-school-dxd-1834
The ID high-school-dxd-1834 is extracted correctly, but the API request fails with a 404 Not Found error.
API request: https://mellieapi2.vercel.app/anime/info?id=high-school-dxd-1834
Status: 404 Not Found
I’ve verified that the ID is correctly extracted and URL-encoded before making the API request. The API documentation indicates that it should handle both numeric and alphanumeric IDs, but it seems to fail for the latter.

I’ve attempted the following solutions without success:

Encoding the ID: Using encodeURIComponent to ensure the ID is properly encoded.
Direct API Testing: Manually testing the API with alphanumeric IDs to verify if the issue lies with the API.
Error Handling: Adding error handling to log and understand any errors returned by the API.`

AnimeInfo.js:

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Typography, Card, CardMedia, CardContent, CircularProgress } from '@mui/material';
import { useParams } from 'react-router-dom';

const AnimeInfo = () => {
  const { id } = useParams(); // Extract 'id' from the URL
  const [anime, setAnime] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    console.log(`Extracted ID from URL: ${id}`); // Log the ID

    if (id) {
      const encodedId = encodeURIComponent(id); // Encode the ID

      const fetchAnimeInfo = async () => {
        try {
          const response = await axios.get(`https://mellieapi2.vercel.app/anime/info?id=${encodedId}`);
          setAnime(response.data);
          setLoading(false);
        } catch (error) {
          setError(error);
          setLoading(false);
        }
      };

      fetchAnimeInfo();
    } else {
      setLoading(false);
      setError('Invalid ID');
    }
  }, [id]);

  if (loading) return <CircularProgress />;
  if (error) return <Typography variant="body1" color="error">Error fetching anime info: {error.toString()}</Typography>;
  if (!anime) return null;

  return (
    <Card>
      <CardMedia
        component="img"
        height="auto"
        image={anime.poster}
        alt={`${anime.name} poster`}
      />
      <CardContent>
        <Typography variant="h4">{anime.name}</Typography>
        <Typography variant="body1" paragraph>
          {anime.description}
        </Typography>
        <Typography variant="body2">Rating: {anime.stats.rating}</Typography>
        <Typography variant="body2">Sub Episodes: {anime.stats.episodes.sub}</Typography>
        <Typography variant="body2">Dub Episodes: {anime.stats.episodes.dub}</Typography>
        <Typography variant="body2">Duration: {anime.stats.duration}</Typography>
      </CardContent>
    </Card>
  );
};

export default AnimeInfo;

App.js:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import AnimeInfo from './components/AnimeInfo';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/anime/:id" component={AnimeInfo} />
        <Route path="*">
          <div>404 Not Found</div>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

`ID Extraction and Encoding:

Expected the id to be correctly extracted from the URL using useParams.
Expected the encodeURIComponent function to encode the ID properly, ensuring it is safe for use in the URL.
Making the API Request:

Expected the API request to succeed and return the anime information for both numeric and alphanumeric IDs.
For example, navigating to http://localhost:3000/anime/high-school-dxd-1834 should make a successful API call and display the corresponding anime information.
Direct API Testing:

Expected the API to handle both numeric and alphanumeric IDs correctly when tested directly.
Anticipated a successful response (status 200) with the expected data for IDs like high-school-dxd-1834.
Reviewing API Documentation:

Expected to find confirmation that the API supports alphanumeric IDs and any specific constraints or formats required.
Actual Outcome:
With Numeric IDs:

The ID is extracted, encoded, and the API request succeeds, returning the expected anime information.
With Alphanumeric IDs:

The ID is extracted and encoded correctly, but the API request fails with a 404 Not Found error.
Direct API testing confirms that the API endpoint returns a 404 error for alphanumeric IDs, despite the documentation indicating support for them.`