useNavigate挂钩在react.js中使用Azure AD进行身份验证时没有重定向我的页面

Question

从Azure AD成功登录后，我正在尝试导航到仪表板页面。但是，只有地址栏值发生了更改，实际页面不会出现。

这是我的代码片段。

import { useNavigate } from 'react-router-dom';
import { useMsal, useIsAuthenticated } from "@azure/msal-react";
const { instance } = useMsal();
const navigate = useNavigate()
const onSubmit = async () => {
try {
const response = await instance.loginPopup(loginRequest);

if(response){
navigate('dashboard/app')
}

} catch (error) {
console.error(error);

}
};

地址栏只更改为"仪表板/应用程序"，页面不会出现。

我也尝试过删除async，但是没有成功。

请帮忙。。。

我需要导航到实际页面。

Answer 1

useNavigate钩子(像所有React钩子一样(只能在React组件内部使用。

如果没有这些，就无法连接到React生命周期方法中。

您还需要确保这个钩子连接到的任何组件都是BrowserRouter组件的child，因为它需要作为Provider来工作。

即，如果您有以下内容：

const App: () => (
<>
<AddressBar />
<BrowserRouter>
Pages and Routes and Stuff...
</BrowserRouter>
</>
)

如果您尝试在AddressBar组件中调用useNavigate，它将不起作用。

相反，你必须向上移动BrowserRouter来包围AddressBar组件，如下所示：

const App: () => (
<BrowserRouter>
<AddressBar />
<>Pages and Routes and Stuff...</>
</BrowserRouter>
)

您还需要确保'dashboard/app'路由是有效的。

Answer 2

请检查路由'dashboard/ap'是否有效，并且您没有丢失文件夹结构。请确保您是从反应组件内部调用它，如下所示：https://reach.tech/router/api/useNavigate