React Router在受保护的Route上显示一个空白屏幕

Question

因此，从本质上讲，我正在尝试建立一个身份验证工作流。所以基本上，Home路由是受保护的，登录不是，注册不是，然后我有一个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页面。

为了详细说明这个问题，实际的问题是，如果用户没有通过电子邮件验证，那么它就会发送到任何地方，并给我一个空白屏幕，这意味着<重定向到="/verifyEmail"；不起作用。为了进一步调试它，我决定用Hello<>我看到一个屏幕上有Hello。所以我不认为身份验证是问题，只是它不能路由到合适的页面。

请帮忙。

Answer 1

您可以创建一个HOC(一个组件(来包装您的Routes，并在那里进行验证。

示例：

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 of react-router-dom重定向到"/"，以防用户未登录。

最后在我的App.js:中

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