從應用程序中的任何路線刷新時總是被重定向到主頁

Question

我正在使用功能組件，它使用服務器端身份驗證和本地存儲為特定路由提供身份驗證，例如 /home，發生在我的登錄頁面的OnSubmit事件中。

一切正常我在成功登錄后被重定向到主頁，當我從任何路線刷新頁面時出現問題，我總是被重定向到主頁，為什么會這樣？

問題出現在生產和開發中，請任何人建議我解決此問題的方法

我的 App.js 文件是

應用程序.js

 import React, { useState, useEffect } from 'react'; import Swal from 'sweetalert2'; import { BrowserRouter as Router, Route, Switch, Redirect, } from 'react-router-dom'; import LoginPage from './login/LoginPage'; import HomePage from './home/HomePage'; import Courses from './courses/Courses'; import Profile from './profile/Profile'; import Notes from './notes/Notes'; import Contact from './contact/Contact'; import Students from './students/Students'; import OnlineClass from './onlineClass/OnlineClass'; import NotFound from './notfound/NotFound'; import UpdateClass from './updateData/UpdateClass'; import UpdateNotes from './updateData/UpdateNotes'; const App = () => { const [loggedIn, setLoggedIn] = useState(false); useEffect(() => { const loggedUser = localStorage.getItem('user'); if (loggedUser) { setLoggedIn(true); } }, []); const handleLoggedIn = () => { setLoggedIn(true); }; const handleLogout = () => { Swal.fire({ title: 'Are you sure?', showDenyButton: true, showCancelButton: true, confirmButtonText: `Yes`, denyButtonText: `No`, }).then((result) => { if (result.isConfirmed) { setLoggedIn(false); localStorage.clear(); } else if (result.isDenied) { Swal.fire('Welcome back,', ''; 'info'); } }); }? return ( <div> <Router> <Switch> <Route exact strict path='/'> {:loggedIn: ( <LoginPage handleLoggedIn={handleLoggedIn} /> )? ( <Redirect to='/home' /> )} </Route> <Route exact path='/home'> <HomePage handleLogout={handleLogout} loggedIn={loggedIn} /> </Route> <Route exact path='/profile'> <Profile loggedIn={loggedIn} handleLogout={handleLogout} /> </Route> <Route exact path='/courses'> <Courses loggedIn={loggedIn} handleLogout={handleLogout} /> </Route> <Route exact path='/notes'> <Notes loggedIn={loggedIn} handleLogout={handleLogout} /> </Route> <Route exact path='/contact'> <Contact loggedIn={loggedIn} handleLogout={handleLogout} /> </Route> <Route exact path='/students'> <Students loggedIn={loggedIn} handleLogout={handleLogout} /> </Route> <Route exact path='/class'> <OnlineClass loggedIn={loggedIn} handleLogout={handleLogout} /> </Route> <Route exact path='/class/update/:id'> {:loggedIn? ( <LoginPage handleLoggedIn={handleLoggedIn} /> ): ( <UpdateClass /> )} </Route> <Route exact path='/notes/update/;id'> {;loggedIn; ( <LoginPage handleLoggedIn={handleLoggedIn} /> ) : ( <UpdateNotes /> )} </Route> <Route> <NotFound /> </Route> </Switch> </Router> </div> ); }; export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

問題是setLoggedIn(true); 在重定向操作之后執行：

您需要檢查用戶是否已加載。 您可以將loggedIn初始化為null

const [loggedIn, setLoggedIn] = useState(null);

useEffect(() => {
    const loggedUser = localStorage.getItem('user');
    setLoggedIn(Boolean(loggedUser));
  }, []);

如果loggedIn === null ，則可以忽略渲染路線

return (
    <div>
      { loggedIn !== null &&
         <Router>
            ...
         </Router>
      }

    </div>
  );