컴포넌트간 데이터 전송

쎈세 진짜 오래 고민을해봐도 답이나오지가 않습니다
저렇게 navigate를써서 경로이동을하면 이동한곳에서 location 출력이되어야하는데 NULL값이 뜹니다 ㅠㅠ

contact컴포넌트 코드

const handleSubmit = async (e) => {
// Add document to Firestore collection here
try {
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());

console.log(data);
console.log(formData);

await db.collection("contact").add({
company: data.company,
name: data.name,
phone: data.phone,
mail: data.mail,
location: data.location,
plan: data.plan,
personnel: data.personnel,
budget: data.budget,
 });
alert("접수가 완료되었습니다.");

// 페이지 이동, 데이터 전송
navigate("/sendRequest", { state: { data } });

e.target.reset();
 } catch (error) {
console.error(error);
alert("오류가 발생했습니다.");
 }
 };


SendRequest코드

import "./../Send-Request/SendRequest.css";
import { useLocation } from "react-router-dom";

function SendRequest() {
const location = useLocation();
const data = location.state?.data;
console.log(data);

// if (!data) {
// return <div>실패시 출력함</div>;
// }

return (
<div className="send-container">
<h1 className="send-message">제출완료</h1>

node  서버 코드입니다

...생략(대충 폼 데이터 다른 연결한곳으로 출력해달라는내용)

출력 성공 이후 코드입니다.

res.redirect("/sendRequest");
 } catch (err) {
console.log(err.message);
res.status(500).send("Error");
 }
};

module.exports = sendTodayData;
app.post("/contact", sendTodayData);

app.get("/sendRequest", function (req, res) {
res.sendFile(path.join(__dirname, "cleanier-snack_react/build/index.html"));
});

app.js코드입니다

unction App() {
const [planName, setPlanName] = useState(""); // App.js에서 planName 상태 추가

const handlePlanSelect = (plan) => {
setPlanName(plan);
 };

return (
<div className="App">
<Routes>
<Route
path="/"
element={
<>
<Nav />
<Banner />
<Advangages />
<Process />
<Plan planName={planName} setPlanName={setPlanName} />
<Review />
<Contact planName={planName} setPlanName={setPlanName} />
<Footer />
<Tel />
<Dropdowns
planName={planName}
handlePlanSelect={handlePlanSelect}
/>
</>
}
/>
<Route
path="/sendRequest"
element={
<>
<Nav />
<SendRequest />
<Cleanier />
<Footer />
</>
}
></Route>
</Routes>
</div>
 );
}

그럼 서버에서는 res.redirect('/sendRequest')를 새로고침되지않게
res.send같은걸로 수정후
(이것도 새로고침되던가용
뭘써야하죠 ㅇㅅㅇ)

contact컴포넌트에서 현재
<form
action="/contact"
method="POST"
className="form"
onSubmit={handleSubmit}
>

이런식으로 데이터를 보내주고있는데 이거를 ajax요청(axios)로 보내면 되나요?

사랑합니다 쎈세