反应路由器词典问题.重定向时，页面仍显示半秒钟

Question

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

路线

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>
)
}

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

Answer 1

我认为当您第一次从选择器中选择它时authundefined或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}/> }/>
)
}