Блог

В разделе Маршрутизатор я пытаюсь проверить, имеет ли пользователь доступ к компоненту, используя компонент более высокого порядка (hoc).

Поэтому проверьте, вошел ли пользователь в систему в данный момент. В это время попытка доступа к каждой странице может быть предотвращена или вынуждена перейти на другую страницу в соответствии со значением ответа.

Чтобы перейти на другую страницу, нам нужно использовать метод «навигация» в специальном компоненте.

Однако при использовании метода навигации "Error: use Navigate() may be used only in the context of a lt;Routergt; component" появляется фраза.

Поскольку в маршрутизаторе используется hoc, я собираюсь использовать навигацию. Я думаю, что смогу это сделать.

Вы можете сказать мне, в чем проблема? Что я здесь упускаю? Это мой первый раз, когда я пытаюсь использовать бэкэнд, поэтому, пожалуйста, поймите.

src/App.js

 import './App.css'; import {  BrowserRouter as Router,  Routes,  Route,  Link } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/LoginPage/LoginPage"; import RegisterPage from "./components/views/RegisterPage/RegisterPage"; import Auth from "./hoc/auth"; //lt;-- this is hoc!!!!!!!!!!!!!!  function App() {  return (  lt;Routergt;  lt;divgt;  lt;Routesgt;  lt;Route path="/" element={Auth(LandingPage, null)}/gt;  lt;Route path="/login" element={Auth(LoginPage, false)}/gt;  lt;Route path="/register" element={Auth(RegisterPage, false)}/gt;  lt;/Routesgt;  lt;/divgt;  lt;/Routergt;  ); } export default App;   

src/hoc/auth.js (Авт.)

 import React, { useEffect } from "react"; import axios from "axios"; import {useDispatch} from "react-redux"; import {auth} from "../_actions/user_action"; import { useNavigate } from "react-router-dom";  export default function(SpecificComponent, option, adminRoute = null){    function AuthenticationCheck(props){  let navigate = useNavigate(); //lt;-- this doesn't work!!!!  const dispatch = useDispatch();    useEffect(()=gt; {  dispatch(auth()).then(response =gt; {  console.log(response);    if(!response.payload.isAuth){  if(option){  navigate('/login');//lt;-- this doesn't work!!!!  }  } else {  if(adminRoute amp;amp; !response.payload.isAdmin){navigate('/')}   else {   if(option === false){ navigate('/'); //lt;-- this doesn't work!!!!}  }  }  })  },[])  return (  lt;SpecificComponent/gt;  )  }    return AuthenticationCheck(); }  

index.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import "antd/dist/antd.css"; import {Provider} from "react-redux"; import {applyMiddleware, createStore} from "redux"; import promiseMiddleware from "redux-promise"; import ReduxThunk from "redux-thunk"; import Reducer from "./_reducers";  const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore);   ReactDOM.render(  lt;Provider store={createStoreWithMiddleware(Reducer,  window.__REDUX_DEVTOOLS_EXTENSION__ amp;amp; window.__REDUX_DEVTOOLS_EXTENSION__()  )}gt;  lt;App /gt;  lt;/Providergt;,  document.getElementById('root') );  reportWebVitals();  

Обновите свой HOC как

Note: Calling a component as Function rather than JSX Element may lead to unexpected bugs and also creates issues with the usage of Hooks.

 import {BrowserRouter, Routes, Route, useNavigate} from "react-router-dom";  function ActualComp(navigate){  console.log(navigate)  return lt;gt;Actual Complt;/gt; }  function HOC(SpecificComponent, option, adminRoute = null){    function AuthenticationCheck(props){  let navigate = useNavigate();   return (  lt;SpecificComponent navigate={navigate} /gt;  )  }    return lt;AuthenticationCheck /gt;; lt;---- Here instead of `AuthenticationCheck()` }  function App() {  return (  lt;divgt;  lt;BrowserRoutergt;  lt;Routesgt;  lt;Route path="/" element={HOC(ActualComp)} /gt;  lt;/Routesgt;  lt;/BrowserRoutergt;  lt;/divgt;  ); }  export default App;  

Вы можете использовать компонент перенаправления:

 import { Redirect, useHistory} from 'react-router-dom'; ...  const history = useHistory(); lt;Redirect  to={{  pathname: '/login',  state: { from: history.location },  }} /gt;  

или измените местоположение:

 window.location.href = '/login';