React 上下文不在全球范围内更新

Question

this is my Context, But I can't update its values globally. It does change but not globally, and If I refresh the page for example, it goes to the default values again. What I am doing wrong?

import React, { useReducer } from 'react'

const initialState = {
    user: 'magnus',
    isAuth: false
};

const actions = {
    SET_USER: "SET_USER",
    SET_AUTH: "SET_AUTH"
};

const reducer = (state,action) => {
    switch(action.type) {
        case actions.SET_USER:
            return {
                user: action.user
            };
        case actions.SET_AUTH:
            return {
                isAuth: action.setAuth
            };
        default:
            return state;
    }
};

export const UserContext = React.createContext();

const Provider = ({children}) => {
    const [state, dispatch] = useReducer(reducer, initialState);
    
    const value = {
        user: state.user,
        isAuth: state.isAuth,
        setUser: (user) => {
            dispatch({ type: actions.SET_USER, user});
        },
        setAuth: (auth) => {
            dispatch({type: actions.SET_AUTH, auth});
        }
    };

    return (
        <UserContext.Provider value={value}>
            {children}
        </UserContext.Provider>
    );

};

export default UserContext;
export { Provider };

Im using this on the other component:

const { user, isAuth, setUser } = useContext(UserContext);

    return(
        <div>
        <h3>{user}</h3>
        <h3>{isAuth ? 'ok' : 'not ok'}</h3>
        <button onClick={() => setUser('brutus')}>change</button>
        </div>
    )

It is updating the user but only in this component, If I reload the page for example, it keeps saying 'magnus' instead of 'brutus'.

This is my index.js:

<Provider>
  <App />
</Provider>

App.js:

<BrowserRouter>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                </Routes>
            </BrowserRouter>

Can someone please help me?

Answer 1

The problem is you export UserContext twice

export const UserContext = React.createContext();

export default UserContext;

So just keep the 1st one and import into component:

import { UserContext } from './UserContext'

Here is the working example