javascript - React 上下文 API 和路由器

问题描述

我正在尝试将上下文 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”的值。

第2步：登录后，执行login.js中的成功函数，改变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/家

标签： javascriptreactjs

<GoogleIdContextProvider> <Router> <Switch> <Route exact path = "/home" component = {Home} /> <Route exact path = "/create" component = {Create} /> <Route path = "/" component = {Login} /> </Switch> </Router> </GoogleIdContextProvider>

javascript - React 上下文 API 和路由器

问题描述

解决方案

推荐阅读