React продолжает обновлять мою страницу после выбора ⇐ Javascript

[Anonymous]

Итак, я следую учебному пособию по react webapp Я использую React 19 и Tailwind 4.0, только с тех пор я все только установил этот сервер на 08-03-2025
. Борьба с Tailwind 4.0 < /p>
сделал AddJob & deletejob, и теперь я также добавил плагин Toastify, я заметил, что это не будет работать, когда я DeleteJob, и проблема, похоже, в попытке получить данные. Нормальная навигация на странице будет работать так же, как и ожидалось, с прокомментированным кодом или без него. Без загрузки favicon.const res = await fetch(`/api/jobs/${id}`, {
method: "DELETE",
});
< /code>
То же самое касается AddJob: < /p>
const res = await fetch("/api/jobs", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newJob),
});
< /code>
Когда я не рекомендую это, вся моя страница будет обновляться, и моя консоль будет выглядеть так, как это изображение консоли я заявил, что оно будет обновляться также при загрузке изысканности.import React from "react";
import {
Route,
createBrowserRouter,
createRoutesFromElements,
Router,
RouterProvider,
} from "react-router-dom";
import HomePage from "./pages/HomePage";
import MainLayout from "./layouts/MainLayout";
import JobsPage from "./pages/JobsPage";
import NotFoundPage from "./pages/NotFoundPage";
import JobPage, { jobLoader } from "./pages/JobPage";
import AddJobPage from "./pages/AddJobPage";

const App = () => {
// Add new Job
const addJob = async (newJob) => {
const res = await fetch("/api/jobs", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(newJob),
});
return;
};

// Delete Job
const deleteJob = async (id) => {
const res = await fetch(`/api/jobs/${id}`, {
method: "DELETE",
});
return;
};

const router = createBrowserRouter(
createRoutesFromElements(







)
);
return ;
};

export default App;

< /code>
jobpage: < /p>
import React from "react";
import { useParams, useLoaderData, useNavigate } from "react-router-dom";
import { FaArrowLeft, FaMapMarker } from "react-icons/fa";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";

const JobPage = ({ deleteJob }) => {
const navigate = useNavigate();
const { id } = useParams();
const job = useLoaderData();

const onDeleteClick = (jobId) => {
const confirm = window.confirm("Are you sure want to delete this job?");
if (!confirm) return;

deleteJob(jobId);
toast.success("Job deleted!");
navigate("/jobs");
};

return (




Back to Job Listings









{job.type}
{job.title}


{job.location}




Job Description


{job.description}


Salary


{job.salary} / Year



{/* */}

{/* */}

Company Info

{job.company.name}

{job.company.description}



Contact Email:

{job.company.contactEmail}

Contact Phone:

{job.company.contactPhone}

{/* */}

Manage Job

Edit Job

onDeleteClick(job.id)}
className="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-full w-full focus:outline-none focus:shadow-outline mt-4 block"
>
Delete Job







);
};

const jobLoader = async ({ params }) => {
const res = await fetch(`/api/jobs/${params.id}`);
const data = await res.json();
return data;
};

export { JobPage as default, jobLoader };

< /code>
Я нажал кнопку «Удалить» на jobpage.jsx и должен был перейти на /задание с тостом. Я искал более 3 часов без успеха. Chatgpt также не знает и продолжает говорить мне, что мои ошибки исходят из формы ...

Подробнее здесь: https://stackoverflow.com/questions/794 ... er-a-fetch