PrivateRoute в реакции-роутер-дом: 6.8.0
Я создаю собственное приложение PrivateRoute для чата. Вот мой PrivateRoute:
import { useState, useEffect } from 'react';
import { Route, Navigate } from 'react-router-dom';
import axios from 'axios';
interface PrivateRouteProps {
element: React.ComponentType<any>;
path: string;
}
export function PrivateRoute({ element: Element, path }: PrivateRouteProps) {
const [authenticated, setAuthenticated] = useState(false);
useEffect(() => {
axios
.get('http://golang:8080')
.then((response) => {
if (response.status === 200) {
setAuthenticated(true);
}
})
.catch((error) => {
console.info(error);
});
}, []);
return (
<Route
path = {path}
element = {
authenticated ? <Element /> : <Navigate to = "/login" replace = {true} />
}
/>
);
}
Как я его использую: <PrivateRoute path = {RouterPath.ROOT} element = {Main} />
Изображение моего кода:
Когда я создаю свой проект в консоли, у меня возникают следующие ошибки: Экран Итак, как использовать пользовательский PrivateRoute?
Смотрите также stackoverflow.com/questions/66289122/…
Спасибо, но эти ответы мне не помогли.
Ответы 1
Вот как вы можете изменить свой частный компонент маршрута, он будет решать только отображать дочерние элементы или нет, никаких реквизитов
import { PropsWithChildren } from 'react'
export function PrivateRoute({ children }: PropsWithChildren) {
const [authenticated, setAuthenticated] = useState(false);
useEffect(() => {
axios
.get('http://golang:8080')
.then((response) => {
if (response.status === 200) {
setAuthenticated(true);
}
})
.catch((error) => {
console.info(error);
});
}, []);
return <>
authenticated ? (
children
) : (
<Navigate to = "/login" replace = {true} />
)
</>
}
Тогда используйте его таким образом
<Route path = {path}>
<Route path = {RouterPath.ROOT} element = {<PrivateRoute><Main/></PrivateRoute>}/>
</Route>
Спасибо, все работает отлично, но <PrivateRoute> подчеркивает красную строку и говорит: PrivateRoute cannot be used as a JSX component. Its return type 'string | number | boolean | ReactFragment | Element | null | undefined' is not a valid JSX element. Type 'undefined' is not assignable to type ''Element | null.
Вы можете обернуть его в reactFragment, позвольте мне изменить ответ и показать вам, как
Можете ли вы проверить сейчас, это должно решить проблему с набором текста
authenticated изначально имеет значение false, поэтому перенаправление всегда будет отображаться до того, как useEffect сможет запуститься и проверить, аутентифицирован ли пользователь, и обновить состояние authenticated. Эта реализация ошибочна.
Ответ был о маршрутизаторе, а не о всей реализации
Вы делаете это наоборот