404 not found axios MERN blog please help

See more:

React

I have been following along on a YouTube tut for creating a MERN blog. When I try to get data from MongoDB using Axios, I get a 404 error, saying it can't find /posts route. Please help me find what I am missing. I've only found this on Google once and there is no solution provided. I have tried changing up the axios.get path but no changes. The api is running on 5000 and react/client is on 3000. Any help would be appreciated.

My proxy:
"proxy": "http://localhost:5000/api/"

App.jsx :
<pre lang="Javascript">import Topbar from "./components/topbar/Topbar";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Settings from "./pages/settings/Settings";
import Single from "./pages/single/Single";
import Write from "./pages/write/Write";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  const currentUser = true;
  return (
    <Router>
      <Topbar />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/posts">
          <Home />
        </Route>
        <Route path="/register">
          {currentUser ? <Home /> : <Register />}
        </Route>
        <Route path="/login">{currentUser ? <Home /> : <Login />}</Route>
        <Route path="/post/:id">
          <Single />
        </Route>
        <Route path="/write">{currentUser ? <Write /> : <Login />}</Route>
        <Route path="/settings">
          {currentUser ? <Settings /> : <Login />}
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Home.jsx:
import { useEffect, useState } from "react";
import { useLocation } from "react-router";
import Header from "../../components/header/Header";
import Posts from "../../components/posts/Posts";
import Sidebar from "../../components/sidebar/Sidebar";
import axios from 'axios';
import "./home.css";

export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await axios.get("/posts")
      console.log(res)

    }
    fetchPosts()
    .then((res) => {
      this.setState({ total: res.data });
  })
  .catch((error) => {
      // here you will have access to error.response
      console.log(error.response)
  });
  },[])
  const location = useLocation();
  console.log(location);
  return (
    <>
      
      <div>
        <posts posts="{posts}/">
        <sidebar>
      </div>
    
  );
}

-----------------------------------------------------------------------------------
ERROR RECEIVED:

Quote:

GET http://localhost:3000/posts 404 (Not Found)
{pathname: '/posts', search: '', hash: '', state: undefined}
hash: ""
pathname: "/posts"
search: ""
state: undefined
[[Prototype]]: Object

{data: '\n\n\n\n

Cannot GET /posts

\n\n\n', status: 404, statusText: 'Not Found', headers: {…}, config: {…}, …}
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
data: "\n\n\n\n<title>Error\n\n\n

Cannot GET /posts

\n\n\n"
headers: {access-control-allow-headers: '*', access-control-allow-methods: '*', access-control-allow-origin: '*', connection: 'keep-alive', content-length: '144', …}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
status: 404
statusText: "Not Found"
[[Prototype]]: Object

What I have tried:

I have tried everything I can think of on Google and no solutions.