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.