Reactjs React路由器呈现无效组件，然后呈现有效组件

每当我进入路径（“/”）时，即使我已登录，注册组件也会加载一次，持续几秒钟，然后显示仪表板，重定向如何解决该问题时也会发生同样的情况

<Route
    exact
    path="/"
    render={() => {
        return loggedIn ? <Dashboard /> : <Signup />;
    }}
/>

<Route
    exact
    path="/resetPassword"
    render={() => {
        return loggedIn ? (
            <Redirect to="/" />
        ) : (
            <ResetPassword/>
        );
    }}
/>

我的完整代码如下

import React, { Fragment, useState, useEffect, lazy, Suspense } from 'react';
import { Paper } from '@material-ui/core';
import Dashboard from './Components/Dashboard/Dashboard';
import LoadingPage from './Components/LoadingPage/main';
import ForgotPassword from './Components/ForgotPassword/Fp';
import Signup from './Components/Signup/Signup';
import Login from './Components/Login/Login';
import PageNotFound from './Components/404/Page.js';
import Activation from './Components/Activation/Activation';
import ResetPassword from './Components/ResetPassword/Reset';
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Redirect,
} from 'react-router-dom';
import Cookies from 'js-cookie';

const App = () => {
    const [login, setLogin] = useState(false);

    const checkStatus = function () {
        const mt = Cookies.get('t');
        if (mt === '' || mt === undefined) {
            setLogin(false);
        } else {
            setLogin(true);
            // return true;
        }
    };

    useEffect(() => {
        const interval = setInterval(() => {
            cookieCheck();
        }, 1000);
        return () => clearInterval(interval);
    });

    const cookieCheck = async () => {
        const mt = await Cookies.get('rt');
        if (mt === '' || mt === undefined) {
            if (login) {
                setLogin(false);
            }
        } else {
            if (!login) {
                setLogin(true);
            }
        }
    };

    console.log(login);
    return (
        <Router>
            <Fragment>
                <Paper elevation={0}>
                    <Switch>
                        <Route
                            path="/forgotpassword"
                            exact
                            component={ForgotPassword}
                        />
                        <Route
                            exact
                            path="/login"
                            render={() => {
                                return login ? <Redirect to="/" /> : <Login />;
                            }}
                        />
                        <Route
                            exact
                            path="/signup"
                            render={() => {
                                if (login) {
                                    return <Redirect to="/" />;
                                } else {
                                    return <Signup />;
                                }
                            }}
                        />

                            <Route
                                exact
                                path="/"
                                render={() => {
                                    return login ? (
                                        <Dashboard />
                                    ) : (
                                        <LoadingPage />
                                    );
                                }}
                            />


                        <Route
                            exact
                            path="/resetPassword/:code/:uid"
                            render={() => {
                                return login ? (
                                    <Redirect to="/" />
                                ) : (
                                    ResetPassword
                                );
                            }}
                        />
                        <Route
                            exact
                            path="/activation/:code/:uid"
                            component={Activation}
                        />
                        <Route component={PageNotFound} />
                    </Switch>
                </Paper>
            </Fragment>
        </Router>
    );
};

export default App;

import React，{Fragment，useState，useffect，lazy，suspend}来自'React'；
从'@material ui/core'导入{Paper}；
从“./Components/Dashboard/Dashboard”导入仪表板；
从“./Components/LoadingPage/main”导入LoadingPage；
从“./Components/ForgotPassword/Fp”导入ForgotPassword；
从“./Components/Signup/Signup”导入注册；
从“./Components/Login/Login”导入登录名；
从“/Components/404/Page.js”导入PageNotFound；
从“./Components/Activation/Activation”导入激活；
从“./Components/ResetPassword/Reset”导入ResetPassword；
进口{
BrowserRouter作为路由器，
路线,，
转换
重新使用
}从“反应路由器dom”；
从“js cookie”导入cookie；
常量应用=（）=>{
const[login，setLogin]=useState（false）；
const checkStatus=函数（）{
const mt=Cookies.get（'t'）；
如果（mt==''| mt===未定义）{
setLogin（false）；
}否则{
setLogin（true）；
//返回true；
}
};
useffect（（）=>{
常量间隔=设置间隔（（）=>{
cookieCheck（）；
}, 1000);
return（）=>clearInterval（interval）；
});
const cookieCheck=async（）=>{
const mt=等待Cookies.get（'rt'）；
如果（mt==''| mt===未定义）{
如果（登录）{
setLogin（false）；
}
}否则{
如果（！登录）{
setLogin（true）；
}
}
};
console.log（登录）；
返回(
{
返回登录？：；
}}
/>
{
如果（登录）{
返回；
}否则{
返回；
}
}}
/>
{
返回登录(
) : (
);
}}
/>
{
返回登录(
) : (
重置密码
);
}}
/>
);
};
导出默认应用程序；

您需要尝试以下操作，以便将

加载

状态添加到组件中：

import React, { Fragment, useState, useEffect, lazy, Suspense } from "react";
import { Paper } from "@material-ui/core";
import Dashboard from "./Components/Dashboard/Dashboard";
import LoadingPage from "./Components/LoadingPage/main";
import ForgotPassword from "./Components/ForgotPassword/Fp";
import Signup from "./Components/Signup/Signup";
import Login from "./Components/Login/Login";
import PageNotFound from "./Components/404/Page.js";
import Activation from "./Components/Activation/Activation";
import ResetPassword from "./Components/ResetPassword/Reset";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from "react-router-dom";
import Cookies from "js-cookie";

const App = () => {
  const [login, setLogin] = useState(false);
  const [loading, setLoading] = useState(true);

  const checkStatus = function () {
    const mt = Cookies.get("t");
    if (mt === "" || mt === undefined) {
      setLogin(false);
    } else {
      setLogin(true);
    }
    setLoading(false);
  };

  useEffect(() => {
    const interval = setInterval(() => {
      checkStatus();
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  console.log(login);
  const isLoginComponent = login ? <Dashboard /> : <LoadingPage />;
  return (
    <Router>
      <Fragment>
        <Paper elevation={0}>
          <Switch>
            <Route path="/forgotpassword" exact component={ForgotPassword} />
            <Route
              exact
              path="/login"
              render={() => {
                return login ? <Redirect to="/" /> : <Login />;
              }}
            />
            <Route
              exact
              path="/signup"
              render={() => {
                if (login) {
                  return <Redirect to="/" />;
                } else {
                  return <Signup />;
                }
              }}
            />

            <Route
              exact
              path="/"
              render={() => {
                return loading ? <div>loading</div> : isLoginComponent;
              }}
            />

            <Route
              exact
              path="/resetPassword/:code/:uid"
              render={() => {
                return login ? <Redirect to="/" /> : ResetPassword;
              }}
            />
            <Route exact path="/activation/:code/:uid" component={Activation} />
            <Route component={PageNotFound} />
          </Switch>
        </Paper>
      </Fragment>
    </Router>
  );
};

export default App;

import React，{Fragment，useState，useffect，lazy，suspend}来自“React”；
从“@material ui/core”导入{Paper}”；
从“/Components/Dashboard/Dashboard”导入仪表板；
从“/Components/LoadingPage/main”导入LoadingPage；
从“/Components/ForgotPassword/Fp”导入ForgotPassword；
从“/Components/Signup/Signup”导入注册；
从“/Components/Login/Login”导入登录名；
从“/Components/404/Page.js”导入PageNotFound；
从“/Components/Activation/Activation”导入激活；
从“/Components/ResetPassword/Reset”导入ResetPassword；
进口{
BrowserRouter作为路由器，
路线,，
转换
重新使用
}从“反应路由器dom”；
从“js cookie”导入cookie；
常量应用=（）=>{
const[login，setLogin]=useState（false）；
const[loading，setLoading]=useState（true）；
const checkStatus=函数（）{
const mt=Cookies.get（“t”）；
如果（mt==“”| | mt==未定义）{
setLogin（false）；
}否则{
setLogin（true）；
}
设置加载（假）；
};
useffect（（）=>{
常量间隔=设置间隔（（）=>{
检查状态（）；
}, 1000);
return（）=>clearInterval（interval）；
}, []);
console.log（登录）；
const isLoginComponent=login？：；
返回(
{
返回登录？：；
}}
/>
{
如果（登录）{
返回；
}否则{
返回；
}
}}
/>
{
返回加载？加载：isLoginComponent；
}}
/>
{
返回登录？：重置密码；
}}
/>
);
};
导出默认应用程序；

---

阅读更多有关

cookies

如何工作的信息：

我认为问题在于，在安装组件时，您没有立即检查cookie状态。这与

login

初始状态

false

相结合，将呈现任何

登录？true:false

false分支组件，直到返回有效身份验证的第一个cookie检查

const [login, setLogin] = useState(false);

const checkStatus = function () {
    const mt = Cookies.get('t');
    if (mt === '' || mt === undefined) {
        setLogin(false);
    } else {
        setLogin(true);
    }
};

useEffect(() => {
    const interval = setInterval(() => {
        checkStatus(); // <-- not called for 1000ms
    }, 1000);
    return () => clearInterval(interval);
});

---

在检查/处理身份验证时，通常使用“加载”或“挂起”状态有条件地呈现路由组件以外的其他内容。您能否提供一个更详细的代码示例，以便我们了解有关

loggedIn

更新的更多内容？@drewrese您能否详细说明…显示如何设置

loggedIn

状态？当然，带有路由器的组件会装载并发出效果以检查身份验证，在处理异步操作时，您会设置一个“挂起”状态。确定身份验证后，更新状态以设置

loggedIn

值并设置“pendin”

const [login, setLogin] = useState(false);

const checkStatus = function () {
    const mt = Cookies.get('t');
    if (mt === '' || mt === undefined) {
        setLogin(false);
    } else {
        setLogin(true);
    }
};

useEffect(() => {
    const interval = setInterval(() => {
        checkStatus(); // <-- not called for 1000ms
    }, 1000);
    return () => clearInterval(interval);
});

const [login, setLogin] = useState(null);

const checkStatus = function () {
    const mt = Cookies.get('t');
    if (mt === '' || mt === undefined) {
        setLogin(false);
    } else {
        setLogin(true);
    }
};

useEffect(() => {
    const interval = setInterval(() => {
        checkStatus();
    }, 1000);
    checkStatus(); // <-- also invoke first render
    return () => clearInterval(interval);
});

<Route
  exact
  path="/"
  render={() => {
    if (login === null) return null;
    return login ? (
      <Dashboard />
    ) : (
      <LoadingPage />
    );
  }}
/>