React Router v6.10 Protected Route problem

Question

我正在尝试用react构建一些有一些受保护的路由。

我的主。jsx文件:

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "./index.css";
import store from "./app/store";
import { Provider } from "react-redux";
import Root from "./components/Root";
import PublicLayout from "./components/PublicLayout";
import PersistLogin from "./components/PersistLogin";
import RequireAuthLayout from "./components/RequireAuthLayout";
import { ErrorPage, Home, Login, Logout, Register } from "./pages";
const router = createBrowserRouter([
{
path: "/*",
element: <Root />,
errorElement: <ErrorPage />,
children: [
{
element: <PublicLayout />,
children: [
{ path: "login", element: <Login /> },
{ path: "register", element: <Register /> },
],
},
{
element: <PersistLogin />,
children: [
{
element: <RequireAuthLayout />,
children: [
{ path: "home", element: <Home /> },
{ path: "logout", element: <Logout /> },
],
},
],
},
],
},
]);

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Provider store={store}>
<RouterProvider router={router} />
</Provider>
</React.StrictMode>
);

Root.jsx:

import React from "react";
import { Outlet } from "react-router-dom";
import Header from "./Header";
const Root = () => {
return (
<>
<Header />
<main>
<Outlet />
</main>
</>
);
};
export default Root;

RequireAuthLayout.jsx:

import React from "react";
import { useLocation, Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";
import { selectCurrentToken } from ".././features/auth/authSlice";
const RequireAuthLayout = () => {
const token = useSelector(selectCurrentToken);
const location = useLocation();
return token ? (
<Outlet />
) : (
<Navigate to={"/login"} state={{ from: location }} replace />
);
};
export default RequireAuthLayout;

PersistLogin.jsx:

import React, { useEffect } from "react";
import { Outlet } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { useRefreshMutation } from "../features/api/authApiSlice";
import { selectCurrentToken, setCredentials } from "../features/auth/authSlice";
import Loading from "../components/Loading";
const PersistLogin = () => {
const [refresh, { isLoading, isError }] = useRefreshMutation();
const dispatch = useDispatch();
const token = useSelector(selectCurrentToken);
let content;
useEffect(() => {
const getAccessToken = async () => {
try {
const result = await refresh();
dispatch(setCredentials(result.data));
} catch (error) {
// console.log(error);
}
};
!token && getAccessToken();
}, []);
if (isLoading) {
content = <Loading />;
} else if (isError) {
content = <p>Bir hata oluştu, tekrar giriş yapınız!</p>;
} else {
<Outlet />;
}
return content;
};
export default PersistLogin;

PersistLogin只是向端点发送请求以检查是否存在cookie。如果存在且有效，则在redux存储中设置令牌。但不幸的是，受保护的路由不能渲染。我的意思是没有错误什么的，但是它们没有渲染。令牌是好的，但仍然…

请帮帮我。

Answer 1

PersistLogin组件似乎没有为嵌套路由呈现Outlet组件来呈现它们的内容。<Outlet />应返回

const PersistLogin = () => {
const [refresh, { isLoading, isError }] = useRefreshMutation();
const dispatch = useDispatch();
const token = useSelector(selectCurrentToken);
let content;
useEffect(() => {
const getAccessToken = async () => {
try {
const result = await refresh();
dispatch(setCredentials(result.data));
} catch (error) {
// console.log(error);
}
};
!token && getAccessToken();
}, []);
if (isLoading) {
content = <Loading />;
} else if (isError) {
content = <p>Bir hata oluştu, tekrar giriş yapınız!</p>;
} else {
content = <Outlet />; // <-- set content
}
return content;
};

或

const PersistLogin = () => {
const [refresh, { isLoading, isError }] = useRefreshMutation();
const dispatch = useDispatch();
const token = useSelector(selectCurrentToken);
let content <Outlet />; // <-- set as "default" content;
useEffect(() => {
const getAccessToken = async () => {
try {
const result = await refresh();
dispatch(setCredentials(result.data));
} catch (error) {
// console.log(error);
}
};
!token && getAccessToken();
}, []);
if (isLoading) {
content = <Loading />;
} else if (isError) {
content = <p>Bir hata oluştu, tekrar giriş yapınız!</p>;
}
return content;
};

或

const PersistLogin = () => {
const [refresh, { isLoading, isError }] = useRefreshMutation();
const dispatch = useDispatch();
const token = useSelector(selectCurrentToken);
useEffect(() => {
const getAccessToken = async () => {
try {
const result = await refresh();
dispatch(setCredentials(result.data));
} catch (error) {
// console.log(error);
}
};
!token && getAccessToken();
}, []);
if (isLoading) {
return <Loading />;
}
if (isError) {
return <p>Bir hata oluştu, tekrar giriş yapınız!</p>;
}
return <Outlet />;
};