问我的React组件在尝试获取api数据时出现404错误？React，Axios，Api

EN

import React, {useEffect, useState} from 'react';
import api from '../api';
// import axios from "axios";

const Brand = () => {

    const [brands, setBrands]= useState([]);

    

  useEffect(() => {
      const fetchData = () => {
          api.getBrand().then((response)=>{
              setBrands(response.data.results);
              console.log(response.data.results);
          });
      };

      fetchData();
  }, [])

    
    return (
        <div className="brand-container">
        {/* {brands && (
            <ul className="brand_list">
                {brands.map((brand)=>{
                    return(
                    <li>{brand.shoe}</li>
                    )
                })}
            </ul>
        ) } */}
            
        </div>
    )
}


export default Brand;

import axios from "axios";

const API_KEY = process.env.RAPID_API_KEY
export default {

getData: () =>
axios({
  method: 'GET',
  url: 'https://v1-sneakers.p.rapidapi.com/v1/sneakers',
  params: {limit: '24'},
  headers: {
    'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
    'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
  }

}),

getDataId: (id) => 
  axios({
    method: 'GET',
  url: 'https://v1-sneakers.p.rapidapi.com/v1/sneakers/' + id,
  headers: {
    'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
    'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
  }
  }),

  getBrand: () =>
    axios({
      method: 'GET',
      url: 'https://v1-sneakers.p.rapidapi.com/v1/brands',
      headers: {
        'x-rapidapi-key': 'f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a',
        'x-rapidapi-host': 'v1-sneakers.p.rapidapi.com'
      }
    })
  


}

// f2326766a3msh573dd850eaeab1fp181777jsnf7f3daf5cc0a'

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Switch, useParams} from 'react-router-dom';

import Home from './components/Home'; 
import SearchBar from './components/SearchBar';
import Navbar from './components/Navbar';
import SneakerId from './components/SneakerId';
import About from './components/About'
import Brand from './components/Brand'


 const App = () => {


    return (
        <Router>
                    <Navbar />
            <Switch>
                <Route exact path="/about" component={About} />
                <Route exact path="/">
                   
                    <Home />
                </Route>
                <Route exact path="/:id">
                <SneakerId  />
                </Route>
                <Route exact path="/brands" component={Brand}/>
               
               
                
                
            </Switch>
        </Router>
    )
}

export default App;