#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
Но всякий раз, когда я нажимаю «О нас» в навигационной панели, он перенаправляется на вход, хотя токен присутствует. Пожалуйста, помогите, как это сделать?