反應上下文 API 和路由器

Question

我正在嘗試將上下文 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 步？

這是屏幕截圖，以便更好地理解。

本地主機：3000

本地主機：3000/家

Answer 1

使用路由器時，必須使用包含交換機和路由的路由器結構。

 <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}

Answer 2

你需要弄清楚 react-router-dom 是如何工作的： https://reactrouter.com/ 。

我猜錯誤出在第 4 步。結果取決於您如何訪問 localhost:3000/home。

1. 如果您注冊並將 'jeong' 放入 Context 中，然后將 go 與 history.push('/home') 一起放入 '/home'，它會按預期正常工作。
2. 但是如果你只輸入 url localhost:3000/home 你就會得到你現在所擁有的。

不同之處在於，在 (1) 中，您在導航時擁有上下文，但在 (2) 中，此上下文不僅存在： https://photos.app.goo.gl/mJZsceMAgek6ABLT7 。

要解決這個問題，如果用戶已注冊，您必須檢查您的根組件並將他的數據放入您的上下文中，例如：

useEffect(() => {
const data = checkRegistration();
if (data.registered) {
  setContext(data.userName)
}}, []);