Request failed with status code 404 error

I'm trying to build a Spotify web app now. I'd like to display an artist's albums when an user clicks the artist from its search result. When I try the code below, I get Request failed with status code 404.

SingerBox.js

import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import ImageNotFound from "../../ImageNotFound.jpg";
import "../../App.css";
import { Link } from "react-router-dom";

import Albums from "../Albums/Albums";
import axios from "axios";

const SingerBox = (props) => {
  const { images, name, id } = props;

  //check if the image array is empty since some artists' image data provided by the API call are empty
  const singer_img = images.length === 0 ? ImageNotFound : images[0].url;

  const handleClick = () => {
    axios
      .get(`http://localhost:4000/${id}`, {
        params: {
          id: id,
        },
      })
      .then((res) => {
        console.log(`Returned album data from the server: ${res}`);
        return <Albums albums={res.data} />;
      })
      .catch((err) => console.log(err));
  };

  return (
    <>
      <Link to={`/albums/${id}`}>
        <div className="box" onClick={() => handleClick()}>
          <div>
            <img className="singer-img" src={singer_img} alt="Card image" />
            {name}
          </div>
        </div>
      </Link>
    </>
  );
};

export default SingerBox;

Albums.js

import React, { Component } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";
import AlbumCard from "./AlbumCard";

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

  return (
    <div className="container" style={{ color: "white" }}>
      {`${id}'s albums`}
    </div>
  );
};

export default Albums;

Server.js

const express = require("express");
const SpotifyWebApi = require("spotify-web-api-node");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
const port = 4000 || process.env.PORT;

require("dotenv").config();

app.use(express.json());
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));

// Create the api object with the credentials
var spotifyApi = new SpotifyWebApi({
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
});

// Retrieve an access token.
spotifyApi.clientCredentialsGrant().then(
  function (data) {
    console.log("The access token expires in " + data.body["expires_in"]);

    // Save the access token so that it's used in future calls
    spotifyApi.setAccessToken(data.body["access_token"]);
  },
  function (err) {
    console.log("Something went wrong when retrieving an access token", err);
  }
);

app.post("/search_result", (req, res) => {
  spotifyApi
    .searchArtists(req.body.keyword)
    .then(function (data) {
      let search_res = data.body.artists.items;
      res.json(search_res);
      res.end();
    })
    .catch((err) => {
      console.log(err);
      res.status(500).send(err);
    });
});

app.get("/albums/:id", (req, res) => {
  console.log(req.params.id);
  spotifyApi.getArtistAlbums(req.params.id).then(function (data) {
    res.json(data.body);
    res.end();
  });
});

app.listen(port, () => console.log(`It's running on port ${port}`));

I also want to know how I can improve the structure of my codes, like axios calls. They seem messy but I don't know where to start to fix them.

In SingerBox component you are trying to make get on http://localhost:4000/${id} there is not such API in your server.js file. that's why you encounter a 404 error which means not found

  const handleClick = () => {
  axios
  .get(`http://localhost:4000/${id}`, {
    params: {
      id: id,
    },
  })
  .then((res) => {
    console.log(`Returned album data from the server: ${res}`);
    return <Albums albums={res.data} />;
  })
  .catch((err) => console.log(err));
 };

Add in your server.js

 app.get("/:id", (req, res) => {
   " your API logic"
  });