反应条件渲染不触发？

Question

我正在尝试通过 useContext 和条件渲染更改导航栏和路由器的内容。 这是我的 App.js：

import "./App.css";
import axios from "axios";
import { AuthContextProvider } from "./context/AuthContext";
import MyRouter from "./MyRouter";

axios.defaults.withCredentials = true;

function App() {
  return (
    <AuthContextProvider>
      <MyRouter />
    </AuthContextProvider>
  );
}

export default App; 

这是我的路由器：

import React, { useContext } from "react";
import AuthContext from "./context/AuthContext";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import MyNavBar from "./components/MyNavbar";
import "./App.css";
import Home from "./components/pages/Home";
import AboutUs from "./components/pages/AboutUs";
import Register from "./components/pages/Register";
import MyFooter from "./components/MyFooter";
import login from "./components/pages/login";
import ProfilePage from "./components/pages/ProfilePage";
function MyRouter() {
  const { loggedIn } = useContext(AuthContext);
  return (
    <Router>
      <MyNavBar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/about-us" component={AboutUs} />
        {loggedIn === false && (
          <>
            <Route exact path="/register" component={Register} />
            <Route exact path="/login" component={login} />
          </>
        )}
        {loggedIn === true && (
          <>
            <Route exact path="/profile" component={ProfilePage} />
          </>
        )}

        <Redirect to="404" />
      </Switch>
      <MyFooter />
    </Router>
  );
}

export default MyRouter;

我的导航栏的条件渲染与路由器的工作方式相同。我的问题是条件渲染片段都不起作用。例如，当我的应用程序启动时，用户未登录并且“loggedIn”值为 false。使用这种逻辑，“注册”和“登录”路由应该可以访问，但它们不是。任何建议或帮助将不胜感激，因为我对使用 React 很陌生。

Here is a screenshot of my console upon loading the application

这是我的“AuthContext”：

const AuthContext = createContext();
function AuthContextProvider(props) {
  const [loggedIn, setLoggedIn] = useState(undefined);
  async function getLoggedIn() {
    const loggedInRes = await axios.get(
      "http://localhost:5000/api/users/loggedIn"
    );
    setLoggedIn(loggedInRes.data);
  }

  useEffect(() => {
    getLoggedIn();
  }, []);
  return (
    <AuthContext.Provider value={{ loggedIn, getLoggedIn }}>
      {props.children}
    </AuthContext.Provider>
  );
}
export default AuthContext;
export { AuthContextProvider };

Answer 1

感谢大家的帮助，我学到了很多关于 ProtectedRoute 概念的知识。我的问题来自我的导航栏组件。我没有将我的变量声明为对象，而是声明了类似的登录 const loggedIn = useContext(AuthContext); 一旦我将其更改为，我的所有错误都已解决 const { loggedIn } = useContext(AuthContext);

Answer 2

已编辑：

您可以创建一个 ProtectedRoute 来根据您的条件路由您的组件，而不是在主路由中使用您的条件。

    import React, { useEffect } from "react";
    import { Route, Redirect, useHistory } from "react-router-dom";
    const ProtectedRoute = ({ component: Component, ...rest }) => {
        const { loggedIn } = useContext(AuthContext);
        return (
            <Route
                {...rest}
                render={(props) =>
                    loggedIn() ? (
                        <Component {...props} />
                    ) : (
                        <Redirect to='/login' />
                    )
                }
            />
        );
    };
export default ProtectedRoute;

• 在您的组件中，您可以通过以下方式更改您的逻辑：

        <ProtectedRoute exact path="/" component={Home} />
        <ProtectedRoute exact path="/about-us" component={AboutUs}/> 
       
        <Route exact path="/register" component={Register} />
        <Route exact path="/login" component={login} />
 
        <ProtectedRoute exact path="/profile" component={ProfilePage} />
       

这意味着如果你想保护一个路由，你应该使用 ProtectedRoute 路由它，否则是经典的反应路由。

您可以阅读有关 ProtectedRoute 概念 here