【发布时间】：2021-03-04 00:50:21
【问题描述】：
如果用户没有登录，我会尝试制作重定向到登录页面的应用 这是我的 PrivateRoute：
export const PrivateRoute = ({ component: Component, ...rest }) => {
return (
<Route {...rest} render={props => (
!authService.currentUserValue ?
<Redirect to={{pathname: '/login', state: {from: props.location}}}/>
:
<Component {...props} />
)}/>
);
}
这是我的应用渲染：
render() {
const { currentUser } = this.state;
return (
<Router history={history}>
<div>
<PrivateRoute exact path="/" component={Dashboard} />
<Route path="/login" component={LoginPage} />
</div>
</Router>
);
}
这是我的登录页面：
class LoginPage extends Component {
constructor(props) {
super(props);
if (authService.currentUserValue) {
this.props.history.push('/');
}
}
render() {
const { classes } = this.props;
return (
<Container component="main" maxWidth="xs">
<CssBaseline/>
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon/>
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Formik
initialValues={{
username: '',
password: ''
}}
/*validationSchema={Yup.object().shape({
username: Yup.string().required('Username is required'),
password: Yup.string().required('Password is required')
})}*/
onSubmit={({username, password}, {setStatus, setSubmitting}) => {
setStatus();
authService.login(username, password)
.then(
user => {
const {from} = this.props.location.state || {from: {pathname: "/"}};
this.props.history.push(from);
},
error => {
setSubmitting(false);
setStatus(error);
}
);
}}
render={({errors, status, touched, isSubmitting}) => (
<Form className={classes.form}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="username"
label="Username"
name="username"
autoComplete="username"
autoFocus
error={(errors.username && touched.username)}
/>
<ErrorMessage name="username" component="div" className="invalid-feedback" />
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
error={(errors.password && touched.password)}
/>
<ErrorMessage name="password" component="div" className="invalid-feedback" />
<FormControlLabel
control={<Checkbox value="remember" color="primary"/>}
label="Remember me"
/>
<br />
{
isSubmitting
&&
<img src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
}
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
disabled={isSubmitting}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
{status && <div className={'alert alert-danger'}>{status}</div>}
</Form>
)}
/>
</div>
</Container>
)
}
}
当 privateRoute 重定向到登录页面 (/login) 我看不到任何东西， 但如果我刷新页面 (/login)，它将显示我的登录表单。
我试图改变构建组件的方式，但没有成功。
为什么？
通过将历史版本更改为 4.10.1 解决。这个博客有帮助：https://jasonwatmore.com/post/2020/10/22/react-router-v5-fix-for-redirects-not-rendering-when-using-custom-history
tnx
【问题讨论】：