reactjs - React 路由器渲染无效组件然后渲染有效组件

Question

每当我进入路径（“/”）时，即使我已登录，注册组件也会在几秒钟内加载一次，然后显示仪表板与重定向如何解决它相同。

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

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

我正在设置login这样的：

const cookieCheck = () => {
  const mt = Cookies.get("rt");
  if (mt === "" || mt === undefined) {
    if (loggedIn) {
      setLogin(false);
    }
  } else {
    if (!loggedIn) {
      setLoggedIn(true);
    }
  }
};

我的完整代码如下

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;

标签： reactjsreact-router

Answer 1

你需要尝试这样的事情来loading为你的组件添加状态：

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;

在此处阅读有关如何cookies工作的更多信息：https ://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies/get