React Router Outlet 和 Protected Outlet 不工作

Question

我想根据用户登录状态渲染网点。问题是 outlet 永远不会被渲染。只有父元素 rendered.I 尝试使用“/:username/boards/*”作为路径。但这也没有用。

App.js

<Route element={<ProtectedOutlet />}>
   <Route path="/:username/boards" element={<UserHome logOut={actions.logOut} getAllBoards={actions.getAllBoards} />} >
      <Route path="b" element={<Board />} />
   </Route>
</Route>

ProtectedOutlet.js

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";

const ProtectedOutlet = () => {

  const isLoggedIn = useSelector(state => state.auth.isLoggedIn);

return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
}

export default ProtectedOutlet;

UserHome.js

const UserHome = (props) => {
return (
    <div className="user-home">
        <Navbar />
        <Outlet />
    </div>
)
}

Answer 1

问题已解决。我更改了 ProtectedOutlet

中的代码

来自

const ProtectedOutlet = () => {

const isLoggedIn = useSelector(state => state.auth.isLoggedIn);

return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
}

到

const ProtectedOutlet = () => {

const { isLoggedIn, user } = useSelector(state => state.auth);

if (!isLoggedIn && !user) return <h1>Loading</h1>

return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
}

我还有其他未经身份验证的路由（/login、/register 等），称为 PublicOutlet.js。

PublicOutlet.js

import React from "react";
import { Navigate, Outlet } from "react-router-dom";
import { useSelector } from "react-redux";

const PublicOutlet = () => {

const { isLoggedIn, user } = useSelector(state => state.auth);

return isLoggedIn ? <Navigate to={`/${user.username}/boards`} 
replace={true} /> : <Outlet />;
}

export default PublicOutlet;

问题是当我在 url 栏中输入 url 时，protectedoutlet 组件检查用户是否登录。第一次渲染时，isLoggedIn state 还没有更新。所以它被导航到 /login 路线。然后 /login 路由被包装在 publicoutlet 组件中。当 publicoutlet 组件检查用户是否登录时，isLoggedIn 状态变为 true。因此，它被重定向到 /${user.username}/boards。我花了 2 天时间才找出问题所在。哈哈

React Router Outlet 和 Protected Outlet 不工作

React Router Outlet and Protected Outlet does not working

reactjs

react-router-dom