React Router Outlet и Protected Outlet не работают
Я хочу отображать розетки на основе состояния входа пользователя. Проблема в том, что розетка никогда не отображается. Отображается только родительский элемент. Я пытался использовать «/: 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>
)
}
Ну, может быть, я где-то напортачил с кодом. Маршрут всегда перенаправляется на «/: username/boards», даже если я набираю «/: username/boards/b» в адресной строке. Но это работает, когда я удалил Protected Outlet и просто обернул компонент Board с помощью UserHome.
Думаете, вы могли бы создать демонстрацию Бег codeandbox вашего кода, воспроизводящую эту проблему, которую мы могли бы проверить и отладить вживую? Если вы разместили репозиторий на Github, его можно импортировать непосредственно в песочницу.
Я не могу, там написано, что модулей больше 500.
Я понимаю. Можете ли вы тогда создать минимальный пример codeandbox? Просто минимальный пример кода, который воспроизводит эту проблему, которую мы можем проверить.
Хорошо, братан, я попробую.
Ответы 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-адрес в адресную строку, компонент protectedoutlet проверяет, вошел ли пользователь в систему или нет. При первом рендеринге состояние isLoggedIn еще не обновляется. поэтому он переходит к /login маршруту. Затем маршрут /login заворачивается в компонент publicoutlet. Когда компонент publicoutlet проверяет, вошел ли пользователь в систему, состояние isLoggedIn меняется на true. Итак, он перенаправляется на /${user.username}/boards. Мне потребовалось 2 дня, чтобы выяснить проблему. РЖУ НЕ МОГУ
Я скопировал/вставил ваш код в работающий кодыпесочница, и кажется, что маршруты/выходы работают без проблем. Я не могу воспроизвести описанную вами проблему.