javascript - React 组件无法正确卸载

问题描述

我有一个针对编码挑战的项目，但在路由方面遇到了麻烦。我有一个注册后设置，要求用户填写安全问题或地址，或者上传个人资料图片。用户登录时的问题，并且这些东西没有设置，他被正确地发送到 /setup 路由，但是 /settings 组件加载了。我有延迟加载。但是我已经对所有组件进行了延迟加载，但无济于事。我也移动了路线。添加“精确”只是为了看看它是否会做任何事情，但什么也做不了。我没有收到任何错误消息，什么也没有。如果您想自己查看错误，这是应用程序的 heroku url。https://jetcakes-project.herokuapp.com。随意创建一个用户，或者只使用测试用户：

邮箱：test@user.com
密码：Password1

这是我的路由页面：

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="/" />
                }
            }}
        />
    )
}

标签： javascriptreactjsredux

javascript - React 组件无法正确卸载

问题描述

解决方案

推荐阅读