[英]Javascript function not being called between page navigations and routing using react-router-dom v6
I have an app.js something like this我有一个 app.js 是这样的
class App extends React.Component {
render() {
return (
<Routes>
<Route path="/"
element={
<PrivateRoute
auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
>
{' '}
<Navigate to="/dashboard" />
</PrivateRoute>
}
/>
<Route path="/login"
element={
<PublicRoute
auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
>
{' '}
<LoginPage />
</PublicRoute>
}
/>
<Route path="/dashboard"
element={
<PrivateRoute
auth={{ isAuthenticated: AuthenticationResource.isLoggedIn() }}
>
{' '}
<DashboardPage />
</PrivateRoute>
}
/>
and my authentication resource like this和我这样的身份验证资源
import StorageFactory from './storage';
const AuthenticationResource = (() => {
const storage = StorageFactory();
const getSessionId = function () {
console.log('sessioncookie', storage.getItem());
return storage.getItem();
};
const removeSessionId = function () {
return storage.removeItem();
};
return {
isLoggedIn: () => typeof getSessionId() === 'string' && getSessionId().length > 0,
};
})();
export default AuthenticationResource;
I have placed a console statement in the getSessionId function.我在 getSessionId function 中放置了一个控制台语句。 I am able to see the console logs when the page is loading the first time.
第一次加载页面时,我可以看到控制台日志。 But whenever I am moving between pages using navigate, I don't see the console logs, which I am inferring that the isLoggedIn() is not getting called.
但是,每当我使用导航在页面之间移动时,我都看不到控制台日志,我推断 isLoggedIn() 没有被调用。 Please help me out.
请帮帮我。 Thanks in Advance
提前致谢
PS This is how the private routing and public routing are defined PS 私有路由和公有路由是这样定义的
const PublicRoute = ({ auth: { isAuthenticated }, children }) => {
return isAuthenticated ? <Navigate to="/dashboard" /> : children;
};
const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
return isAuthenticated === true ? children : <Navigate to="/login" />;
};
The isLoggedIn
function should be called when the route is accessed and not when the Route
component rendered. isLoggedIn
function 应该在访问路由时调用,而不是在渲染Route
组件时调用。 Move invoking the function into the route protection components.将调用 function 移动到路由保护组件中。
Example:例子:
const PublicRoute = ({ auth: { isAuthenticated }, children }) => {
return isAuthenticated() // <-- invoke here
? <Navigate to="/dashboard" />
: children;
};
const PrivateRoute = ({ auth: { isAuthenticated }, children }) => {
return isAuthenticated() // <-- invoke here
? children
: <Navigate to="/login" />;
};
... ...
<Routes>
<Route
path="/"
element={
<PrivateRoute
auth={{
isAuthenticated: AuthenticationResource.isLoggedIn // <-- pass reference here
}}
>
<Navigate to="/dashboard" />
</PrivateRoute>
}
/>
<Route
path="/login"
element={
<PublicRoute
auth={{
isAuthenticated: AuthenticationResource.isLoggedIn // <-- pass reference here
}}
>
<LoginPage />
</PublicRoute>
}
/>
<Route
path="/dashboard"
element={
<PrivateRoute
auth={{
isAuthenticated: AuthenticationResource.isLoggedIn // <-- pass reference here
}}
>
<DashboardPage />
</PrivateRoute>
}
/>
</Routes>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.