Good afternoon everyone, I'm having this error.I have a problem with the page loading...
How to solve?Using devtools, in the console it indicates: "Failed to load resource: the server responded with a status of 404 ():" , which indicates some access to the backend...
My Front-end_code:
//folder: pages//AdminAccessindex.jsx
import React, { useEffect, useRef, useState } from 'react';import { api } from '../../services/api';import { BsHexagonFill } from 'react-icons/bs'import { Section } from '../../components/Section';import { Input } from '../../components/Input';import { Button } from '../../components/Button';import { ToastContainer, toast } from 'react-toastify';import 'react-toastify/dist/ReactToastify.css';import { Container, Main, Logo, Form } from './styles';export function AdminAccess() { const mainRef = useRef(null); const containerRef = useRef(null); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [loadingSignUp, setLoadingSignUp] = useState(false); const handleSignUp = async () => { try { if (!name || !email || !password) { throw new Error("Complete todos os campos."); }; if (name.length < 4) { throw new Error("O nome deve ter no mínimo 4 caracteres."); }; const emailDefault = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailDefault.test(email)) { throw new Error("Por favor, coloque um email válido."); }; if (password.length < 6) { throw new Error("A senha deve ter no mínimo 6 caracteres."); }; setLoadingSignUp(true); api.post("/adminaccess", { name, email, password }) .toast("Administrador cadastrado com sucesso!"); setLoadingSignUp(false); } catch(error) { setLoadingSignUp(false); if (error.response) { toast(error.response.data.message); } else { toast("Não foi possível cadastrar."); } };}; const handleKeyPress = event => { if (event.key === "Enter") { handleSignUp(); } }; useEffect(() => { const handleResize = () => { const containerHeight = mainRef.current.offsetHeight; const windowHeight = window.innerHeight; if (containerHeight > windowHeight) { containerRef.current.style.height = "auto"; } else { containerRef.current.style.height = "100%"; }; }; handleResize(); window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); }; }, []); return (<Container ref={containerRef}><Main ref={mainRef}><Logo><BsHexagonFill /> food explorer</Logo><Form><h1>Crie sua conta</h1><Section title="Seu nome"><Input placeholder="Exemplo: José de Oliveira" onChange={e => setName(e.target.value)} /></Section><Section title="Email"><Input placeholder="Exemplo: exemplo@email.com.br" onChange={e => setEmail(e.target.value)} /></Section><Section title="Senha"><Input type="password" placeholder="No mínimo 6 caracteres" onChange={e => setPassword(e.target.value)} onKeyPress={handleKeyPress} /></Section><Button onClick={handleSignUp} loading={loadingSignUp} title="Criar conta de administrador" /></Form></Main><ToastContainer autoClose={1500} draggable={false} /></Container> );}//folder: services
import axios from 'axios';export const api = axios.create({ baseURL: "http://localhost:3333"});/* Use "http://localhost:3333" para acessar o database local *//* Use "https://backend-foodexplorer-api-6tji.onrender.com" para acessar o database online *///folder: routesindex.jsx
import { useState, useEffect } from 'react';import { BrowserRouter } from 'react-router-dom';import { useAuth } from '../hooks/auth';import { api } from '../services/api';import { toast } from 'react-toastify';import 'react-toastify/dist/ReactToastify.css';import { AuthRoutes } from './auth.routes';import { AdminAccessRoutes } from './admin.access.routes';import { UserRoutes } from './user.routes';import { RegisterRoutes } from './register.routes';export function Routes() { const { user, isAdminAccess } = useAuth(); const [, setLoaded] = useState(false); const [adminAccessExists, setAdminAccessExists] = useState(false); useEffect(() => { async function checkIfAdminAccessExists() { try { const response = await api.get("/adminaccess"); if (response.data) { setAdminAccessExists(true); } else { setAdminAccessExists(false); } setLoaded(true); } catch (error) { if (error.response && error.response.status === 404) { // O servidor respondeu com um status 404 (NotFound) } else { // Outro tipo de erro console.error("Erro ao verificar se o administrador existe:", error); toast("Erro ao verificar se existe um administrador, tente novamente."); } setLoaded(true); } }; checkIfAdminAccessExists(); }, []); return (<BrowserRouter> { adminAccessExists ? ( user ? (isAdminAccess ? <AdminAccessRoutes /> : <UserRoutes />) : <AuthRoutes /> ) : (<RegisterRoutes /> ) }</BrowserRouter> );}https://github.com/GuiCoralli/frontend-FoodExplorer
I tried to change the path but was unsuccessful.Admin requests don't work.I hope Get and show requests work on the backend.