[英]Prevent user from going to profile page
因此,我需要阻止用户在选择个人资料后返回个人资料页面 (/profile)。 我正在存储应用程序 state 中选择的配置文件。
想要的场景:用户转到 /profile,select 一个配置文件,然后转到“/”(这是我的家),如果他愿意,可以导航到 /exams。 但是,他无法将 go 返回到 /profile,因为他已经在应用程序内部,配置文件存储在 state 中。如果他尝试通过浏览器后退箭头将 go 返回到 /profile,甚至在 url 中键入 /profile,当前页面只是重新加载。
实现这一目标的最佳方法是什么?
OBS:这个const { id } = useSelector...是从 state 中检索配置文件的 const,所以我必须使用它作为条件,但我不知道如何。
因此,如果用户有一个不为空的 id(这意味着他已经选择了一个配置文件),他就不能 go 返回到配置文件。 除此之外,他还可以访问/profile。
下面是我的 route.tsx:
const Exams = lazy(() => import('../pages/private/Exams'));
const Home = lazy(() => import('../pages/private/Home'));
const ProfileSelector = lazy(() => import('../pages/private/ProfileSelector'));
const { id } = useSelector((state: RootState) => state.profile);
const AppRoutes = () => {
return (
<Router history={history}>
<Suspense fallback={<LoadingPage />}>
<Switch>
<Route exact path={'/'} component={Home} />
<Route exact path={'/exams'} component={Exams} />
<Route exact path={'/profile'} component={ProfileSelector} />
</Switch>
</Suspense>
</Router>
);
};
export default AppRoutes;
我的个人资料商店,如果有任何用处:
interface UserProfileModel {
id: string;
council: string;
state: string;
number: string;
description: string;
}
const initialState: UserProfileModel = {
id: '',
council: '',
state: '',
number: '',
description: '',
};
export const userProfileSlice = createSlice({
name: 'profile',
initialState,
reducers: {
selectProfile: (state, action: PayloadAction<UserProfileModel>) => {
return {
...state,
...action.payload,
};
},
clearProfile: () => initialState,
},
});
export const { selectProfile, clearProfile } = userProfileSlice.actions;
export default userProfileSlice.reducer;
当用户选择配置文件时,将 state 例如 profileSelected 设置为 true:
放
{profileSelected ? null : <Route exact path={'/profile'} component={ProfileSelector} />}
代替
<Route exact path={'/profile'} component={ProfileSelector} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.