我正在尝试通过 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 };
答案 0 :(得分:0)
已编辑:
您可以创建一个 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
答案 1 :(得分:0)
感谢所有帮助我的人,我学到了很多关于 ProtectedRoute 概念的知识。我的问题来自我的导航栏组件。我没有将变量声明为对象,而是像这样声明登录
const loggedIn = useContext(AuthContext);
一旦我将其更改为
const { loggedIn } = useContext(AuthContext);