使用 react-router-dom 重新加载页面时出现问题

Question

我设法创建了一条私人路线并使用react-router-dom 导航到不同的页面。但是，当我导航到一个页面并重新加载它时，它首先会转到 /login 半秒钟，然后正确地重新加载页面。如何防止这种不良行为并改进我的路由？

这是我的路线：

    <Router>
      <Route
        path="/"
        component={() =>
          !auth ? <Redirect to="/login" /> : <Redirect to={path} />
        }
      />
      <Route exact path="/home" component={Home} />
      <Route exact path="/dashboard" component={Dashboard} />
      <Route exact path="/login" component={RedirectPage} />
    </Router>

这是完整的组件：

import {
  Route,
  BrowserRouter as Router,
  Link,
  Redirect,
} from "react-router-dom";
import { Container, Button } from "@material-ui/core/";
import Login from "./Login";
import { useContext,useState } from "react";
import { UserContext } from "../App";
import { signOut } from "../Storage/Auth";

const Routes = () => {
  const { auth, setAuth, logging } = useContext(UserContext);
  const [path,setPath] = useState("/home")
  const handleSignOut = () => {
    signOut(setAuth);
    console.log("Auth", auth);
  };

  const Home = () => {
    console.log("Home");
    return (
      <Container>
        <h1>Welcome</h1>
        <Link to="/">
          <Button onClick={handleSignOut}> Log Out</Button>
        </Link>
        <Link to="/dashboard">
          <Button> Dash</Button>
        </Link>
      </Container>
    );
  };

  const Dashboard = () => {
    setPath("/dashboard")
    console.log("Dash");
    return (
      <Container>
        <Link to="/home">
          <Button> HOME</Button>
        </Link>
        <h1>Dashboard</h1>
      </Container>
    );
  };

  const RedirectPage = () => {
    if (!logging) {
      return <div></div>;
    } else {
      return <Login />;
    }
  };

  return (
    <Router>
      <Route
        path="/"
        component={() =>
          !auth ? <Redirect to="/login" /> : <Redirect to={path} />
        }
      />
      <Route exact path="/home" component={Home} />
      <Route exact path="/dashboard" component={Dashboard} />
      <Route exact path="/login" component={RedirectPage} />
    </Router>
  );
};

export { Routes };

这是我的Login 组件。

import { useState, useContext } from "react";
import {
  Button,
  Card,
  Container,
  Typography,
  Box,
  TextField,
} from "@material-ui/core/";
import { useHistory} from "react-router-dom";
import { signIn } from "../Storage/Auth";
import { UserContext } from "../App";

const Login = () => {
  const [mail, setMail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const { user, setUser } = useContext(UserContext);

  const handleSignIn = async (m: string, p: string) => {
    await signIn(m, p).then((e) => {
      console.log("USERID", e, user);
      setUser(e);
    });
  };

  const history = useHistory();
  const handleEnter = () => {
    history.push("/home");
  };

  const handleOnKey = (e: any) => {
    if (e.key === "Enter") {
      e.preventDefault();
      handleSignIn(mail, password);
      handleEnter();
    }
  };

  return (
    <Card className="Card" raised={true}>
      <Container className="Input">
        <Typography className="Sign-in" paragraph={true} variant="inherit">
          Sign in
        </Typography>
        <Box
          className="Box"
          borderColor="error.main"
          border={2}
          borderRadius="borderRadius"
        >
          <Container>
            <TextField
              fullWidth={true}
              placeholder=" email"
              value={mail}
              onChange={(e) => {
                setMail(e.target.value);
              }}
              onKeyDown={(e) => {
                handleOnKey(e);
              }}
            />
          </Container>
        </Box>
      </Container>
      <Container className="Input">
        <Box
          className="Box"
          borderColor="error.main"
          borderRadius="borderRadius"
          border={2}
        >
          <Container>
            <TextField
              fullWidth={true}
              placeholder=" password"
              value={password}
              onChange={(e) => {
                setPassword(e.target.value);
              }}
              type="password"
              onKeyDown={(e) => {
                handleOnKey(e);
              }}
            />
          </Container>
        </Box>
        <h1> </h1>
        <Button
          onClick={() => {
            handleSignIn(mail, password);
          }}
          fullWidth={true}
          color="primary"
          variant="contained"
          type="submit"
        >
          Sign In{" "}
        </Button>
        <h1> </h1>
        <Box className="Sign-in">
            <Button size="small"> Register </Button>
        </Box>
        <h1> </h1>
      </Container>
    </Card>
  );
};

export default Login;

这是App 组件：

import { useEffect } from "react";
import { Routes } from "./Routing/Routes";
import "./App.css";
import { Container } from "@material-ui/core/";
import initFirebase from "./Storage/Secret";
import { useState, createContext } from "react";
import { onAuthChange } from "./Storage/Auth";

export const UserContext = createContext<any>(null);
function App() {
  const [user, setUser] = useState(null);
  const [auth, setAuth] = useState<string | null>("");
  const [logging, setLogging] = useState(null)
  useEffect(() => {
    initFirebase();
  }, []);

  useEffect(() => {
    onAuthChange(setAuth,setLogging);
  }, [auth]);

  return (
    <UserContext.Provider value={{ user, setUser, auth,setAuth,logging }}>
      <div className="App">
        <Container>
          <Routes />
        </Container>
      </div>
    </UserContext.Provider>
  );
}

export default App;

另外，这里是auth 逻辑：

import firebase from "firebase/app";
import "firebase/auth";

const auth = () => firebase.auth();

const signIn = async (email, password) => {
  await auth()
    .signInWithEmailAndPassword(email, password)
    .then((userCredential) => {
      var user = userCredential.user;
      console.log("USER", user);
      return user.uid;
    })
    .catch((error) => {
      var errorCode = error.code;
      var errorMessage = error.message;
      alert(errorCode, errorMessage);
      return null;
    });
};

const onAuthChange = (setState, setLoading) => {
  auth().onAuthStateChanged((u) => {
    if (!u) {
      console.log(u);
      setLoading(true);
    } else {
      setState(u);
      setLoading(false);
    }
  });
};

const signOut = (setState) => {
    auth()
    .signOut()
    .then(function () {
      console.log("LOGGED OUT");
    })
    .catch(function (error) {
      console.log("ERROR LOGGING OUT");
    });
  setState(null);
};
export { signIn, signOut, onAuthChange }

最后，完整代码在https://gitlab.com/programandoconro/adminkanjicreator

任何建议将不胜感激，谢谢。

Answer 1

我建议早点进行身份验证检查。所以像这样的东西，这样路由本身只有在 auth 中有东西时才会被渲染。我认为您的示例也缺少通常有帮助的 Switch 语句。

<Router>
    {!auth ? (
        <Switch>
            <Route exact path="/login" component={RedirectPage} />
        </Switch>
    ) : (
        <Switch>
            <Route exact path="/home" component={Home} />
            <Route exact path="/dashboard" component={Dashboard} />
        </Switch>
    )}
</Router>

Answer 2

通常，您会希望某种“加载”或“不确定”状态表示既不经过身份验证也不表示未经身份验证。您可以使用这第三个“状态”来保存 UI，然后根据身份验证在任何事物上呈现一种或另一种方式。

由于您的 auth 逻辑解析为布尔值 true|false。

const onAuthChange = (setState, setLoading) => {
  auth().onAuthStateChanged((u) => {
    if (!u) {
      console.log(u);
      setLoading(true);
    } else {
      setState(u);
      setLoading(false);
    }
  });
};

您可以使用初始auth 状态不是这两者的事实。我建议使用null。

const [auth, setAuth] = useState<string | null>(null);

当使用auth 状态渲染Route 时，您可以增加逻辑以在决定重定向之前提前返回。

<Route
  path="/"
  render={() => {
    if (auth === null) return null;
    return <Redirect to={auth ? path : "/login" />;
  }}
/>

请注意，我也切换到了 render 属性，component 属性用于附加实际的 React 组件。这些处理方式略有不同。您可以阅读有关路由渲染方法的差异here。

完整的路由器示例：

<Router>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/dashboard" component={Dashboard} />
    <Route path="/login" component={RedirectPage} />
    <Route
      path="/"
      render={() => {
        if (auth === null) return null;
        return <Redirect to={auth ? path : "/login" />;
      }}
    />
  </Switch>
</Router>

请注意，我还包含了Switch 组件并重新排序了路由，因此在不太具体的路径之前列出了更具体的路径。这允许您从所有路由中删除不必要的 exact 属性，因为 Switch 仅呈现路由（相对于 Router 所做的包含性）。

Answer 3

我终于设法解决了这个问题。现在重新加载工作完美，安全性作为例外实施。这是我最后的Router：

<Router>
      <Route
        path="/"
        render={() =>
          logging ? <Redirect to={"/login"} /> : <Redirect to={path} />
        }
      />
      <Route exact path="/" render={() => auth && <Home />} />
      <Route exact path="/dashboard" render={() => auth && <Dashboard />} />
      <Route exact path="/login" component={Login} />
</Router>

这是组件现在的样子。

import {
  Route,
  BrowserRouter as Router,
  Link,
  Redirect
} from "react-router-dom";
import { Container, Button } from "@material-ui/core/";
import Login from "./Login";
import { useContext, useState, useEffect } from "react";
import { UserContext } from "../App";
import { signOut } from "../Storage/Auth";

const Routes = () => {
  const { auth, setAuth, logging } = useContext(UserContext);
  const handleSignOut = () => {
    signOut(setAuth);
    console.log("Auth", auth);
  };
  const pathname = window.location.pathname;
  const [path, setPath] = useState(pathname);

  useEffect(() => {
    console.log(path);
    path === "/login" && setPath("/");
    path !== "/" && path !== "/dashboard" && setPath("/");
  }, [auth]);

  const Home = () => {
    console.log("Home");
    return (
      <Container>
        <h1>Welcome</h1>
        <Link to="/">
          <Button onClick={handleSignOut}> Log Out</Button>
        </Link>
        <Link to="/dashboard">
          <Button> Dash</Button>
        </Link>
      </Container>
    );
  };

  const Dashboard = () => {
    console.log("Dash");
    return (
      <Container>
        <Link to="/">
          <Button> HOME</Button>
        </Link>
        <h1>Dashboard</h1>
      </Container>
    );
  };

  return (
    <Router>
      <Route
        path="/"
        render={() =>
          logging ? <Redirect to={"/login"} /> : <Redirect to={path} />
        }
      />
      <Route exact path="/" render={() => auth && <Home />} />
      <Route exact path="/dashboard" render={() => auth && <Dashboard />} />
      <Route exact path="/login" component={Login} />
    </Router>
  );
};

export { Routes };

感谢@Richard 和@Drew 的支持。