我想写一个简单的AuthProvider。为此，我有上下文：

type ContextType = {
    auth: string
    setAuth: Dispatch<SetStateAction<string>>
}  
const AuthContext = createContext({} as ContextType)

实际上是提供者本身

type Props = {
    children: ReactNode
}

export function AuthProvider({children}: Props):JSX.Element {
   const [auth, setAuth] = useState<string>("") 
   const value = useMemo(() => ({
        auth, setAuth
   }), [auth]);
  
   console.log("inside - ",auth)
   return (
      <AuthContext.Provider value={value}>
      {children}
      </AuthContext.Provider>
   )
}
  
export function useAuth(): ContextType {
    return useContext(AuthContext)
}

问题是saveAuth不会改变值。也就是说，当我收到一个令牌时，我会尝试保存它：

const { auth,setAuth } = useAuth();
const response = await getToken(data);
if (response) {
    const accessToken = response.access
    saveAuth(accessToken)
}

现在在Requier中：

const RequierAuth = () => {
    const { auth } = useContext(AuthContext) as AuthContextType;
    const location = useLocation();
    console.log("require : ", auth)
    return (
        auth != undefined && auth !== ""?<Outlet/> : <Navigate to = "/auth" state = {{from:location}} replace />
    );

}

该值始终是默认值，即""。虽然我收到并保存的令牌是正确的。该函数的错误是什么？
我可能错了，但是Require Auth有问题。例如，我将日志添加到：

console.log("inside - ",auth)
    return (
      <AuthContext.Provider value={value}>
      {children}
      </AuthContext.Provider>
    )

而在调用setAuth函数后，值发生了变化，现在我转到RequireAuth保护的页面，日志显示auth现在为空，我不明白为什么会这样？

索引：

root.render(
  <React.StrictMode>
     <BrowserRouter>
     <AuthProvider>
      <App />
     </AuthProvider>
    </BrowserRouter>
  </React.StrictMode>
);

app

<div className="App">
      <Routes>
          <Route path="/" element={<Layout />}>
            <Route path="auth" element={<SignInForm />} />
            <Route path="reg" element={<SignUpForm />} />
            <Route element = {<RequierAuth/>}>
                <Route path="home" element={<Home />} />              
            </Route>
          </Route>
        </Routes>
</div>

重现错误

1)https://codesandbox.io/s/zen-wildflower-hxkg42?file=/src/auth.tsx
2)go to /auth
3)input some data -> submit -> check console
4)go /home and back navigate to the page /auth. Although this should not be the case. You can change the initial value in useState and it will work fine