Переход маршрута в React Router v7 ⇐ Javascript

[Anonymous]

В настоящее время я разрабатываю проект с использованием Rout Router V7 Framework, где мне нужно реализовать защищенные маршруты. В то время как я успешно реализовал механизм защиты, я сталкиваюсь с проблемой, в которой кратко вспыхивает макет защищенной страницы, прежде чем произойдет перенаправление. Я хочу предотвратить такое поведение, обеспечив, чтобы перенаправление произошло до того, как произойдет любая страница. Ниже приведены мой route.jsx и protected.jsx реализации: < /p>
import { Outlet, useNavigate } from "react-router";
import { useDispatch } from "react-redux";
import { getTokenFromCookie } from "./tokenServices";
import { setOpenAuthModal } from "../redux/slices/authSlice";

const ProtectedRoute = () => {
const dispatch = useDispatch();
const navigate = useNavigate();

const token = getTokenFromCookie();

useEffect(() => {
if (!token) {
dispatch(setOpenAuthModal());
navigate("/");
}
}, [token, dispatch, navigate]);

return token ? : null;
};

export default ProtectedRoute;
< /code>
import { index, layout, prefix, route } from "@react-router/dev/routes";

export default [
layout("./layouts/AppLayout.jsx", [
index("routes/home/route.jsx"),
route("/support", "routes/support/route.jsx"),
route("/rooms/:villaId", "routes/room/route.jsx"),
route("/archive/:cityName", "routes/archive-city/route.jsx"),

layout("./services/auth/ProtectedRoute.jsx", [
route("/profile", "routes/profile/dashboard/route.jsx"),
route("/wallet", "routes/wallet/route.jsx"),
route("/invite-friends", "routes/invite-friends/route.jsx"),
route("/trips", "routes/trips/route.jsx"),
...prefix("/comments", [
index("routes/comments/route.jsx"),
route("/register/:vilaId", "routes/profile/registerComment/route.jsx"),
]),

...prefix("/host", [
route("/profile", "routes/host/dashboard/route.jsx"),
...prefix("/comments", [
index("routes/host/comments/route.jsx"),
route(
"/:commentId",
"routes/host/comments/residenceHostComments/route.jsx",
),
]),
route("/list-of-resisdence", "routes/host/listOfResisdence/route.jsx"),
route("/statistics", "routes/host/statistics/route.jsx"),

// layout("./services/auth/ProtectedReservationHost.jsx", [
layout("./layouts/hostRegistration/HostRegistrationLayout.jsx", [
...prefix("/residence-registration", [
route(
"/specifications",
"routes/host/residence-registration/specifications/create/route.jsx",
),
route(
"edit/specifications/:registrationId",
"routes/host/residence-registration/specifications/edit/route.jsx",
),
route(
"edit/rooms/:registrationId",
"routes/host/residence-registration/rooms/route.jsx",
),
route(
"edit/images/:registrationId",
"routes/host/residence-registration/images/route.jsx",
),
route(
"edit/facilities/:registrationId",
"routes/host/residence-registration/facilities/route.jsx",
),
route(
"edit/neighborhood/:registrationId",
"routes/host/residence-registration/neighborhood/route.jsx",
),
route(
"edit/rules/:registrationId",
"routes/host/residence-registration/rules/route.jsx",
),
route(
"edit/prices/:registrationId",
"routes/host/residence-registration/prices/route.jsx",
),
route(
"edit/documents/:registrationId",
"routes/host/residence-registration/documents/route.jsx",
),
]),
]),
// ]),
]),

layout("routes/reservation/route.jsx", [
route(
"reservation/checkout/:reserveId",
"routes/reservation/check/route.jsx",
),
route(
"reservation/payment/:reserveId",
"routes/reservation/payment/route.jsx",
),
route(
"reservation/delivery/:reserveId",
"routes/reservation/delivery/route.jsx",
),
]),
]),
]),
// layout("./services/auth/ProtectedRoute.jsx", [
// route("/invoice/reserve/:reserveId", "routes/invoice-reserve/route.jsx"), // Invoice route here
// ]),
];


Подробнее здесь: https://stackoverflow.com/questions/795 ... -router-v7