Защищенный маршрут в react-маршрутизатор-dom v6

#reactjs #routes #react-router-dom #react-router-component

#реагирует на #маршруты #реагировать-маршрутизатор-дом #реагировать-маршрутизатор-компонент

Вопрос:

Я пытаюсь защитить компонент. Во время регистрации я сохраняю значение токена в хранилище сеансов. Я пытался понять, что если присутствует какое-либо значение токена, то защищенную страницу можно посетить, в противном случае-нет.

Кодекс Routes.js:

 import React from 'react';  import {Route,Routes,BrowserRouter as Router} from 'react-router-dom';  import { Navigate } from 'react-router-dom';  import Home from '../Components/Home/Home';  import About from '../Components/About/About';  import Header from '../Layout/Navigation/Header';  import {Reg} from '../Authentication/Registration/Reg';  import { Login } from '../Authentication/Login/Login';  const RootRoute = () =gt; {    return (  lt;Routergt;  lt;Header/gt;    lt;Routesgt;  lt;Route path="" element={lt;Home /gt;}gt;lt;/Routegt;   lt;Route path="about/*" element={window.sessionStorage.getItem('Token') ? lt;About /gt;: lt;Navigate to="/login" gt;lt;/Navigategt;}gt;lt;/Routegt;     lt;Route path="reg" element={lt;Reg /gt;}gt;lt;/Routegt;   lt;Route path="login" element={lt;Login /gt;}gt;lt;/Routegt;   lt;/Routesgt;     lt;/Routergt;  ) }  export default RootRoute  

Кодекс Header.js

 import React from 'react';  import {Navbar,Nav,Container,NavDropdown} from 'react-bootstrap';  import {Link,useNavigate} from 'react-router-dom';  import './Header.css';  const Header = () =gt; {   const navigate=useNavigate();   const logout=()=gt;{  window.sessionStorage.clear();  navigate('/login');  }   return (  lt;gt;  lt;Navbar bg="dark" variant="dark"gt;  lt;Containergt;  lt;Navbar.Brand href="/"gt;Documentlt;/Navbar.Brandgt;  lt;Nav className="me-auto"gt;   lt;Nav.Link as={Link} to="/"gt;Homelt;/Nav.Linkgt;    lt;Nav.Link as={Link} to="about"gt;About uslt;/Nav.Linkgt;    lt;NavDropdown title="Sign In" id="basic-nav-dropdown"gt;  lt;NavDropdown.Item as={Link} to="reg"gt;Regrationlt;/NavDropdown.Itemgt;  lt;NavDropdown.Item as={Link} to="login"gt;Loginlt;/NavDropdown.Itemgt;  lt;/NavDropdowngt;  lt;button onClick={logout} className="logout"gt;Log Outlt;/buttongt;  lt;/Navgt;  lt;/Containergt;  lt;/Navbargt;  lt;/gt;  ) }  export default Header  

Но всякий раз, когда я нажимаю «О нас» в навигационной панели, он перенаправляется на вход, хотя токен присутствует. Пожалуйста, помогите, как это сделать?