如何根据状态在 React 中重定向

Question

我正在使用 useEffect 获取用户的登录状态 if (userLoggedIn === false) 那么我想立即重定向到登录路由，否则显示仪表板。

我的问题是仪表板显示一瞬间，然后发生重定向！我在 console.log 中测试了 userLoggedIn，它在第一次值未定义时打印两次，然后打印 false...

我认为发生这种情况是因为 state 的值是 (userLoggedIn) 一开始就没有设置，但是即使我将它设置为 false，例如它也会做同样的事情..

我正在使用后端的 useEffect 获取 (userLoggedIn) 值，我的代码是：-

import { useState, useEffect } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import Axios from "axios";

import ModalNotFound from "../../components/Modal/ModalNotFound";

//views
import Home from "./views/Home";
import Menu from "./views/Menu";
import Orders from "./views/Orders";
import AddFood from "./views/AddFood";
import EditFood from "./views/EditFood";
import About from "./views/About";

const DashboardContainer = () => {
  document.body.classList.add("dashboard");

  const [userLoggedIn, setUserLoggedIn] = useState(false);

  Axios.defaults.withCredentials = true;

  useEffect(() => {
    Axios.get("http://dev.com:3001/login")
      .then(({ data }) => setUserLoggedIn(data.loggedIn))
      .catch((err) => console.error(err));

    return () => setUserLoggedIn(); // cleanup: set the value to nothing
  }, []);

  console.log(userLoggedIn);

  return (
    <>
      {userLoggedIn === false ? (
        <Redirect to='/login' />
      ) : (
        <Router>
          <Switch>
            <Route exact strict path='/dashboard' component={Home} />
            {/* if user accesses /dashboard/ then remove ending slash / bcuz it messes the links*/}
            <Route exact strict path='/dashboard/'>
              <Redirect to='/dashboard' />
            </Route>
            <Route exact strict path='/dashboard/menu' component={Menu} />
            <Route exact strict path='/dashboard/orders' component={Orders} />
            <Route
              exact
              strict
              path='/dashboard/add-food'
              component={AddFood}
            />
            <Route
              exact
              strict
              path='/dashboard/edit-food'
              component={EditFood}
            />
            <Route exact strict path='/dashboard/about' component={About} />

            <Route path='*' component={ModalNotFound} />
          </Switch>
        </Router>
      )}
    </>
  );
};

export default DashboardContainer;

对于 EndPoint/Back-end (http://dev.com:3001/login) 我正在使用此代码：-

module.exports = (req, res) => {
  if (req.session.user) {
    res.send({ loggedIn: true, user: req.session.user });
  } else {
    res.send({ loggedIn: false });
  }
};

Answer 1

如您所说，console.log 打印两次，第一次 userLoggedIn 未定义 。由于 userLoggedIn 不等于 false，因此仪表板显示在此处，它转到显示仪表板的代码。

为防止首次渲染，您可以包装 return

return (
        { userLoggedIn !== undefined && {/* your code */} }
       );

如何根据状态在 React 中重定向

How to Redirect in React based on State

node.js

reactjs

express

express-session