Реактивный компонент не выгружается правильно

Question

У меня есть проект, предназначенный для кодирования, и у меня проблемы с маршрутизацией. У меня есть настройка после регистрации, которая требует, чтобы пользователь либо заполнил вопросы безопасности или адрес, либо загрузил фотографию профиля. Проблема, когда пользователь входит в систему, и эти вещи не установлены, он правильно отправляется на маршрут / setup, но вместо этого загружается компонент / settings. У меня ленивая загрузка. Но я взял ленивую загрузку на всех компонентах безрезультатно. Я также перемещался по маршрутам. Добавлен «точный» только для того, чтобы посмотреть, будет ли он что-нибудь делать, но ничего Я не получаю сообщений об ошибках, ничего. Вот URL ссылки на приложение, если вы хотите увидеть ошибку для себя. https://jetcakes-project.herokuapp.com. Не стесняйтесь создать пользователя или просто использовать тестового пользователя:

Email : test@user.com Пароль : Пароль1

Вот моя страница маршрутизации:

import React, { Suspense } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import './App.scss';
import { Provider } from 'react-redux'
import { store, persistor } from './redux/ConfigureStore'
import { PersistGate } from 'redux-persist/integration/react'
import Main from './components/MainPage/Main';
import AuthGuard from './components/AuthGuard/AuthGuard';

const Setup = React.lazy(
    () => import('./components/Setup/Setup')
)

const Dashboard = React.lazy(
    () => import('./components/Dashboard/Dashboard')
)

const Settings = React.lazy(
    () => import('./components/Settings/Settings')
)

export default function App() {
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <BrowserRouter>
                    <Switch>
                        <Route exact path="/">
                            <Main />
                        </Route>

                        <Suspense fallback={<div>Loading...</div>}>
                            <AuthGuard to="/setup">
                                <Setup />
                            </AuthGuard>
                        </Suspense>

                        <Suspense fallback={<div>Loading...</div>}>
                            <AuthGuard to="/settings">
                                <Settings />
                            </AuthGuard>
                        </Suspense>


                        <Suspense fallback={<div>Loading...</div>}>
                            <AuthGuard path="/dashboard">
                                <Dashboard />
                            </AuthGuard>
                        </Suspense>
                    </Switch>
                </BrowserRouter>
            </PersistGate>
        </Provider>
    );
}

А вот мой AuthGuard, если он помогает:

import React from 'react'
import { Route, Redirect } from 'react-router'
import { useLocation } from 'react-router-dom'
import { useSelector } from 'react-redux'

export default function AuthGuard({ children, ...rest }) {
    const isAuthenticated = useSelector(state => state.user.isAuthenticated),
        token = useSelector(state => state.user.token),
        email = useSelector(state => state.user.email),
        hasSecurity = useSelector(state => state.user.hasSecurity),
        hasAddress = useSelector(state => state.user.hasAddress),
        hasProfilePic = useSelector(state => state.user.hasProfilePic),
        location = useLocation()

    return (
        <Route
            {...rest}
            render={() => {
                if (isAuthenticated && token && email) {
                    if (!hasSecurity || !hasAddress || !hasProfilePic) {
                        if (location.pathname !== '/setup') {
                            return <Redirect to="/setup" />
                        } else { return children }
                    } else {
                        return children
                    }
                } else {
                    return <Redirect to="/" />
                }
            }}
        />
    )
}

Answer 1

Мега лицевая панель

Я набрал в / настройки и / настройки AuthGuard to={path} вместо path={path}