阻止用戶進入個人資料頁面

Question

因此，我需要阻止用戶在選擇個人資料后返回個人資料頁面 (/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;

Answer 1

當用戶選擇配置文件時，將 state 例如 profileSelected 設置為 true：

放

{profileSelected ? null : <Route exact path={'/profile'} component={ProfileSelector} />}

代替

<Route exact path={'/profile'} component={ProfileSelector} />