Question

我有一个专为编码挑战而设计的项目，我在路由方面遇到麻烦。我有一个注册后设置，要求用户填写安全性问题或地址，或上传个人资料图片。用户登录时出现问题，但未设置这些内容，他被正确发送到/ setup路由，但/ settings组件加载。我有延迟加载。但是我懒惰地加载了所有组件，但无济于事。我也绕过路线。添加“精确”只是为了查看它是否可以执行任何操作，但是什么也不做。我没有收到任何错误消息，什么也没有。如果您想亲自查看错误，请在此处找到应用程序的heroku网址。 https://jetcakes-project.herokuapp.com。随意创建用户，或只使用测试用户：

电子邮件：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

巨型Faceplam

我输入的是/ setup和/ settings AuthGuard to={path}而不是path={path}

React组件无法正确卸载

1 个答案: