Question

我使用的是材料ui，但是当我单击“提交”时，它不会重定向。我使用的是withRouter，但是发生的事是ex。，

   http://localhost:3000/SignIn

它重定向到

  http://localhost:3000/SignIn?email=abc%40yahoo.in&password=dddddddddddddd

我已经 src / components / userDashboard ，在其中单击登录时，它必须重定向。除了成功检查路由是否有效之外，其他都不过是重定向。

1）我在这里不了解的一件事是，如果用户第一次没有任何历史记录，那么此历史记录会起作用吗？还是我做错了事？路由我不知道该怎么办？

     this.props.history.push('/Userdashboard');

src / SingIn.js

                import React from 'react';
            import PropTypes from 'prop-types';
            import Avatar from '@material-ui/core/Avatar';
            import Button from '@material-ui/core/Button';
            import CssBaseline from '@material-ui/core/CssBaseline';
            import FormControl from '@material-ui/core/FormControl';
            import FormControlLabel from '@material-ui/core/FormControlLabel';
            import Checkbox from '@material-ui/core/Checkbox';
            import Input from '@material-ui/core/Input';
            import InputLabel from '@material-ui/core/InputLabel';
            import LockIcon from '@material-ui/icons/LockOutlined';
            import Paper from '@material-ui/core/Paper';
            import Typography from '@material-ui/core/Typography';
            import withStyles from '@material-ui/core/styles/withStyles';
            import { withRouter } from 'react-router';

            const styles = theme => ({
            main: {
                width: 'auto',
                display: 'block', // Fix IE 11 issue.
                marginLeft: theme.spacing.unit * 3,
                marginRight: theme.spacing.unit * 3,
                [theme.breakpoints.up(400 + theme.spacing.unit * 3 * 2)]: {
                width: 400,
                marginLeft: 'auto',
                marginRight: 'auto',
                },
            },
            paper: {
                marginTop: theme.spacing.unit * 8,
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit * 3}px ${theme.spacing.unit * 3}px`,
            },
            avatar: {
                margin: theme.spacing.unit,
                backgroundColor: theme.palette.secondary.main,
            },
            form: {
                width: '100%', // Fix IE 11 issue.
                marginTop: theme.spacing.unit,
            },
            submit: {
                marginTop: theme.spacing.unit * 3,
            },
            });

            class SignIn extends React.Component {

                handleSubmit(){
                      //as nothing but a redirect if successfull to check whether routes work or not
                    this.props.history.push('/Userdashboard');
                }

                render(){
                    const { classes } =this.props;
                // handleSubmit();
                    return (
                        <main className={classes.main}>
                        <CssBaseline />
                        <Paper className={classes.paper}>
                            <Avatar className={classes.avatar}>
                            <LockIcon />
                            </Avatar>
                            <Typography component="h1" variant="h5">
                            Sign in
                            </Typography>
                            <form className={classes.form} onSubmit={this.handleSubmit}>
                            <FormControl margin="normal" required fullWidth>
                                <InputLabel htmlFor="email">Email Address</InputLabel>
                                <Input id="email" name="email" autoComplete="email" autoFocus />
                            </FormControl>
                            <FormControl margin="normal" required fullWidth>
                                <InputLabel htmlFor="password">Password</InputLabel>
                                <Input name="password" type="password" id="password" autoComplete="current-password" />
                            </FormControl>
                            <FormControlLabel
                                control={<Checkbox value="remember" color="primary" />}
                                label="Remember me"
                            />
                            <Button
                                type="submit"
                                fullWidth
                                variant="contained"
                                color="primary"
                                className={classes.submit}
                            >
                                Sign in
                            </Button>
                            </form>
                        </Paper>
                        </main>
                    );
                }
            }

            SignIn.propTypes = {
            classes: PropTypes.object.isRequired,
            };

            export default  withRouter(withStyles(styles)(SignIn));

2）为什么提交时未路由到该路由？很难理解吗？

我收到以下错误

                TypeError: Cannot read property 'props' of undefined
                handleSubmit
                E:/reacr-redux/src/components/SignIn.js:53
                50 | 
                51 | handleSubmit(event){
                52 |     event.preventDefault();
                > 53 |      this.props.history.push('/Userdashboard');
                    | ^  54 | }
                55 | 
                56 | render(){

Answer 1

尝试一下：

handleSubmit = (event) => {
                event.preventDefault();
                this.props.history.push('/Userdashboard');
            }

此历史记录。推送将首次使用。

Answer 2

如果您正在使用babel的插件Stage-1，则应对该功能使用此格式

handleSubmit = (event) => {
  event.preventDefault();
  this.props.history.push('/Userdashboard');
}

否则，您可能想在类的顶部使用构造函数绑定，例如：

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

read this article for details.

Onsubmit和历史记录推送不起作用反应路由器

2 个答案: