时间戳

首页 > 解决方案 > React Router Redict 问题。重定向时，页面仍然显示半秒

reactjs - React Router Redict 问题。重定向时，页面仍然显示半秒

问题描述

我有一个登录页面，只有未经身份验证的人才能访问。如果登录的人尝试访问该组件，我已经实现了重定向到另一个页面，如下面的片段所示：

路线

const AppRouter = () => {
    return (
        <BrowserRouter>
            <Switch>
                <PublicRoute path="/" exact component={Login}/> 
                <PrivateRoute path="/alun@s" component={ExplicadorMenu}/>
                <PrivateRoute path="/adicionaralun@" component={NewStudent}/>
                <PrivateRoute path="/alun@/:id" component={Student}/>
                <PrivateRoute component={Error}/>) 
            </Switch>        
        </BrowserRouter>
    )
}

公共路线

const PublicRoute = ({component: Component, ...rest}) => {
    const auth = useSelector(state => state.auth)
    return (
        <Route {...rest} component={props => !!auth.uid ? <Redirect to="/alun@s"/>  : <Component {...props}/> }/>
    )
}

但是，如果我在登录时尝试访问 localhost:3000/，它会在半秒内显示登录页面，就像闪烁一样。我试图实现一个加载器，但没有成功，它仍然显示登录页面。

这是我的登录组件，我上次尝试解决此问题时失败：

const Login = () => {
    const { register, handleSubmit } = useForm()
    const [passwordVisibility, setPasswordVisibility] = useState(false)
    const [error, setError] = useState('')
    const [loading, setLoading] = useState(true)
    const dispatch = useDispatch();
    const user = useSelector(state => state.auth.uid)

    // auth handler
    const logInFormSubmit = async (data) => 
        await logInToApp(data)
        .catch(err => setError(err.code))
        
    useEffect(() => {
        setLoading(!loading)
    }, [user])

    // password visibility field 
    const passwordVisibilityHandler = () => setPasswordVisibility(!passwordVisibility)
    const textType = passwordVisibility ? 'text' : 'password'
    const faIcon = passwordVisibility ? <FontAwesomeIcon icon={faEyeSlash}/> : <FontAwesomeIcon icon={faEye}/>

    return (
        <div className="login__background">
            {!loading ? (
                <Container>
                    <Row>
                        <Col md={8} xs={10} lg={4} xl={4} className="mx-auto login__card">
                            <div className="text-center mb-3 mt-3">
                                <h1 className="login__title">Xplica</h1>
                            </div>
                            <Form onSubmit={handleSubmit(logInFormSubmit)}>
                                <Form.Group>
                                    <Form.Label className="login__label">Email</Form.Label>
                                    <Form.Control placeholder="Email" {
                                        ...register(
                                            `email`, 
                                            { 
                                                required: true,  
                                                pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/ 
                                            }
                                        )
                                    }/>
                                    <p className="error1 error"></p>
                                </Form.Group>
                                <Form.Group className="mt-3 login__password">
                                    <Form.Label className="login__label">Password</Form.Label>
                                    <Form.Control type={textType} placeholder="Password" {...register(`password`, { required: true })}/>
                                    <div onClick={passwordVisibilityHandler} className="login__password-icon">
                                        {faIcon}
                                    </div>
                                    <p className="error2 error"></p>
                                </Form.Group>
                                <div className="text-center mb-3">
                                    <button
                                        type="submit"
                                        className="login__submitBtn mt-3">
                                            Conectar
                                    </button>
                                </div>
                            </Form>
                        </Col>
                    </Row>
                </Container>
            ) : (
                <p style={{backgroundColor: 'white'}}>Should be Loader</p>
            )}
        </div>
    )
}

有人可以向我解释我做错了什么吗？感谢您的时间。此致

标签： reactjsreact-router-dom

解决方案

我认为auth是undefined或者null当你第一次从导致渲染的选择器中选择它时<Component {...props}/> }

你可以试试

const PublicRoute = ({component: Component, ...rest}) => {
    const auth = useSelector(state => state.auth)
    if (!auth) return;
    return (
        <Route {...rest} component={props => !!auth.uid ? <Redirect to="/alun@s"/>  : <Component {...props}/> }/>
    )
}

推荐阅读