implementation of react context doesn't work

Question

im using react context in order to share the username among the components. I Have 3 pages: -app.js -signIn(where the username is changed) -page1(where i want to see the updated username)

I did exactly as this tutorial(and many other vidoes) says: https://codingshiksha.com/react/react-js-usecontext-hook-login-user-and-storing-it-example-tutorial-for-beginners-2020/

In my app.js i defined the state in the following way:

    const [user, setUser] = useState();
        return (      
            <Router>
                <Switch>
                <UserContext.Provider value={{user,setUser}}>
                    <Route path="/page1">
                        <page1 />
                    </Route>
                    <Route path="/SignIn">
                        <SignIn />
                    </Route>
                    </UserContext.Provider> 
                </Switch>
            </Router>

In login page I updated the username in the following way:

    const {user,setUser} = useContext(UserContext);
    
    <TextField
                            variant="outlined"
                            margin="normal"
                            required
                            fullWidth
                            id="username"
                            label="Username"
                            name="username"
                            value={user}
                            onChange={(e) => setUser(e.target.value)}
                            autoComplete="username"
                            autoFocus
                        />

And i tried to see the updated value in page1 in the following way:

  const {user} = useContext(UserContext);
    console.log(user); 

But once I load page1 the username is changed back to the default value(in signin page the username does update)

Does anyone know what might be the reason it heppens?

my UserContext file:

import React from 'react';

const UserContext = React.createContext(null);

export { UserContext };

(I tried putting the provider tag outside the router and it still didnt work).

Answer 1

Looks like you are testing the value by reloading the page for each route . When you are refreshing you are rendering a brand new App . So what you need here is to move between the routes without a page refresh.

import { .... , Link } from 'react-router-dom'

<UserContext.Provider value={{ user, setUser }}>
  <Router>
    <Link to="/page1">Page 1</Link>
    <Link to='/SignIn'>Sign In</Link>
    <Switch>
      <Route path="/page1">
        <page1 />
      </Route>
      <Route path="/SignIn">
        <SignIn />
      </Route>
    </Switch>
  </Router>
</UserContext.Provider>

Click on the Link Sign In change your TextField value . Now click the Page 1 link . You should see the context value getting reflected between the routes .