导航react-router-dom在自定义挂钩中不起作用

Question

我编写了一个自定义钩子，利用useContext从组件内访问身份验证上下文，我基于此：管理用户身份验证使用React JS在钩子中我使用从useNavigate react-router-dom（6.22.1）导航：

const AuthContext = createContext();

const AuthProvider = ({ children }) => {
    const navigate = useNavigate();
 
    const logOut = () => {
        //do the logout action
        navigate('/login');
        console.log('logout');
      };
    
    return <AuthContext.Provider value={{ token, logOut }}>{children}</AuthContext.Provider>;
};

export default AuthProvider;

export const useAuth = () => {
    return useContext(AuthContext);
};

我用 BrowserRouter 包裹钩子：

 <BrowserRouter>
              <AuthProvider>
                  <App/>
              </AuthProvider>
            </BrowserRouter>

当我激活注销功能时，我在控制台“注销”中看到，但导航不起作用 我在控制台中没有任何错误，但导航功能什么也不做。 我不确定是否因为在钩子中使用

我尝试创建 DebugRouter 来记录位置的每个更改，但我发现位置没有更改

Answer 1

尝试在您保留注销按钮的组件中导航。