React Router 在受保护的路由上显示空白屏幕

Question

所以本质上，我正在尝试使用身份验证工作流程。所以基本上，Home 路由是受保护的，login 不是，register 不是，然后我有一个 verifyEmail 页面，如果你没有验证就会打开。

const PrivateRoute = ({component: RouteComponent,...rest}) =>{
    const{currentUser}=useContext(AuthContext)

    function route (){

    }

    return(

        <Route
            {...rest}
            render={routeProps =>
                !!currentUser && currentUser != null
                    ?
                    currentUser.emailVerified ? <RouteComponent {...routeProps}/>:(<Redirect to={"/verifyEmail"}/>)
                    :
                    (<Redirect to={"/login"}/>)
            }
        />
    )


}
export default PrivateRoute

然后在 App.js 我有

function App() {
    return (
        <div className={'App'}>
            <AuthProvider>
                <Router>
                    <div>
                        <PrivateRoute path="/" component={HomePage}/>
                        <Route path="/verifyEmail" component={Verify}/>
                        <Route path="/login" component={Login}/>
                        <Route path="/register" component={Register}/>

                    </div>
                </Router>
            </AuthProvider>
        </div>
    );
}

export default App;

当前用户基本上是用户凭据，我使用 Firebase 进行身份验证。我遇到的问题是登录后它只显示一个空白屏幕，当电子邮件未验证而不是显示 verifyEmail 页面时。

为了详细说明这个问题，实际的问题是，如果用户没有通过电子邮件验证，那么它会路由到任何地方，并给我一个空白屏幕，因此意味着 替换它，然后我看到了一个带有 Hello 的屏幕。所以我不认为身份验证是问题，只是它没有路由到适当的页面。

请帮忙。

Answer 1

您可以创建一个 HOC（一个组件）来包装您的路线并在那里进行验证。

例子：

import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';

export default function RequireAuth({ children }) {
    const history = useHistory();
    const auth = useSelector(state => state.auth)

    useEffect(() => {
        if(!auth){
            history.push("/")
        }
    }, [auth])

    return (
        <>
            {children}
        </>
    )
}

这是一个个人项目的例子，我用react-redux 取auth 女巫只是一个布尔值。 我使用useHistory 或react-router-dom 重定向到"/"，以防用户未登录。

最后在我的 App.js 中：

<div>
   <RequireAuth>
       <Route path='/post' component={PostPage} />
   </RequireAuth>
   <Route path='/' exact component={LoginPage} />
</div>