[英]React context API and Router
我正在尝试将上下文 API 与 React-router 一起使用,但它没有像我预期的那样工作。
这是我的 Container.js 文件
import React from "react" import {Route, Switch} from "react-router-dom"; import Home from "../Components/Home/home"; import Create from "../Components/Create/create"; import Login from "../Components/Login/login"; import {GoogleIdContextProvider} from "../Context/googleIdContext"; const Container = () => { return ( <GoogleIdContextProvider> <Switch> <Route exact path = "/home" component = {Home} /> <Route exact path = "/create" component = {Create} /> <Route path = "/" component = {Login} /> </Switch> </GoogleIdContextProvider> ) } export default Container;
这是 login.js 文件
import React, {useState, useContext} from "react" import GoogleLogin from "react-google-login"; import {GoogleIdContext} from "../../Context/googleIdContext" const Login = (props) => { const [googleId, setGoogleId] = useContext(GoogleIdContext); const test = res => { console.log(res.profileObj.googleId); } const success = res => { console.log(res.profileObj); setGoogleId(res.profileObj.familyName) //my family name is "jeong" } return ( <div> <GoogleLogin clientId = "secret;!" buttonText = "GoogleLogin" onSuccess = {success} onFailure = {test} cookiePolicy={'single_host_origin'} /> {googleId} </div> ) } export default Login;
这是我的 home.js 文件
import React, {useContext} from "react"; import {GoogleIdContext} from "../../Context/googleIdContext"; const Home = () => { const [googleId] = useContext(GoogleIdContext); console.log(googleId); return ( <div> {googleId} </div> ) } export default Home;
最后,这是我的 googleIdContext.js 文件:
import React, {useState, createContext} from "react" export const GoogleIdContext = createContext(); export const GoogleIdContextProvider = props => { const [googleId, setGoogleId] = useState("placeholder"); return ( <GoogleIdContext.Provider value = {[googleId, setGoogleId]}> {props.children} </GoogleIdContext.Provider> ) }
我的期望如下:当我使用“npm run start”运行应用程序时,第 1 步:我首先看到带有路由器“localhost:3000”的 login.js jsx 文件。 它有 google 登录按钮和占位符,这是 googleIdContext.js 中变量“googleId”的值。
第二步:我登录后,执行login.js中的success function,改变googleId变量的值,代码如下:“setGoogleId(res.profileObj.familyName)”
第3步:“占位符”一词已更改为“jeong”,即“姓氏”
第 4 步:如果我移动到不同的路由“localhost:3000/home”,home.js 会显示单词“jeong”而不是“placeholder”,因为变量“googleId”的值已从“placeholder”更改为步骤 2 中的“jeong”。
从第 1 步到第 3 步进展顺利。但是,在第 4 步(更改路由器时),该值没有更改,并且仍然显示“占位符”而不是“jeong”,即使在原始路由器中更改了值。
谁能解释一下为什么“localhost:3000/home”路由器仍然显示“占位符”以及我应该如何编写代码来实现第 4 步?
这是屏幕截图,以便更好地理解。
使用路由器时,必须使用包含交换机和路由的路由器结构。
<GoogleIdContextProvider> <Router> <Switch> <Route exact path = "/home" component = {Home} /> <Route exact path = "/create" component = {Create} /> <Route path = "/" component = {Login} /> </Switch> </Router> </GoogleIdContextProvider>
不要忘记导入路由器! --> 从 'react-router-dom' 导入 {BrowserRouter as Router}
你需要弄清楚 react-router-dom 是如何工作的: https://reactrouter.com/ 。
我猜错误出在第 4 步。结果取决于您如何访问 localhost:3000/home。
不同之处在于,在 (1) 中,您在导航时拥有上下文,但在 (2) 中,此上下文不仅存在: https://photos.app.goo.gl/mJZsceMAgek6ABLT7 。
要解决这个问题,如果用户已注册,您必须检查您的根组件并将他的数据放入您的上下文中,例如:
useEffect(() => {
const data = checkRegistration();
if (data.registered) {
setContext(data.userName)
}}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.