从应用程序中的任何路径刷新时总是被重定向到主页

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);在重定向操作之后执行：

您需要检查用户是否已加载。您可以将登录初始化为null

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

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

那么你可以忽略渲染路由，如果loggedIn === null

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

    </div>
  );