React context API and Router

by

I am trying to use context API with the React-router, but it is not working as I expect.

this is my Container.js file

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;

This is login.js file

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;

and this is my home.js file

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;

and finally, it is my googleIdContext.js file:

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

My expectation was the following: when I run the app with "npm run start",
Step 1: I first see the login.js jsx file with the router "localhost:3000". It has the goolgle login button and placeholder, which is the value of the variable "googleId" in googleIdContext.js.

Step 2: After I login, the success function in login.js is executed, which changes the value of googleId variable with the following code: "setGoogleId(res.profileObj.familyName)"

Step 3: the word "placeholder" has been changed to "jeong", which is the family Name"

Step 4: If I move to the different route "localhost:3000/home", the home.js shows the word "jeong" insteand of "placeholder" because the value of the variable "googleId" has been changed from "placeholder" to "jeong" in Step 2.

Things went well from step 1 to 3. However, in step 4 (when changing the router), the value is not changed and still shows "placeholder" instead of "jeong", even if the value is changed in the original router.

Could anyone please explain me why the "localhost:3000/home" router still shows the "placeholder" and how I should write the code to achieve step4?

Here is the screenshot for better understanding.

localhost:3000

localhost:3000/home

34 thoughts on “React context API and Router”

  2. After looking into a handful of the blog articles on your web site, I really
    appreciate your technique of blogging. I added it to my bookmark site
    list and will be checking back in the near future.
    Take a look at my web site too and let me know how you
    feel.

    Reply

  3. I have been exploring for a little for any high quality articles or blog
    posts in this kind of space . Exploring in Yahoo I eventually stumbled
    upon this site. Reading this information So i am happy to exhibit that I have an incredibly just right uncanny feeling I came upon exactly what I needed.

    I most certainly will make sure to do not disregard this web
    site and give it a glance on a constant basis.

    Reply

  5. Hello there, just became aware of your blog through Google, and
    found that it is really informative. I am gonna
    watch out for brussels. I’ll be grateful if you continue this in future.
    Many people will be benefited from your writing.
    Cheers!

    Reply

  6. Just desire to say your article is as surprising. The clarity in your post
    is simply great and i can assume you’re an expert on this subject.
    Well with your permission let me to grab your feed to keep updated with
    forthcoming post. Thanks a million and please
    carry on the rewarding work.

    Reply

  12. Today, while I was at work, my sister stole my iphone and tested to see if it can survive a thirty foot drop, just so
    she can be a youtube sensation. My iPad is now broken and she has 83 views.

    I know this is entirely off topic but I had to share it with someone!

    Reply

  22. Excellent post. Keep posting such kind of information on your site.

    Im really impressed by your blog.
    Hey there, You have performed a fantastic job.
    I will certainly digg it and for my part recommend to my friends.

    I am confident they’ll be benefited from this site.

    Reply

  26. Hey there! I know this is kind of off topic but I was wondering which
    blog platform are you using for this website? I’m getting tired
    of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform.

    I would be awesome if you could point me in the direction of a good platform.

    Reply

  29. hi!,I love your writing very much! proportion we be in contact more about your article on AOL?
    I need a specialist in this area to solve my problem. May be that’s you!
    Taking a look ahead to see you.

    Reply

  33. Hmm it looks like your website ate my first comment (it was extremely long) so I guess I’ll just sum it up what I had
    written and say, I’m thoroughly enjoying your
    blog. I as well am an aspiring blog blogger but I’m still
    new to the whole thing. Do you have any tips
    for first-time blog writers? I’d definitely appreciate it.