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> ); }
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
Cannot GET /posts
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)