Question

我将React用作前端，将Firebase用作后端和数据库。我是login.js组件，登录后，我希望将其重定向到某个formfield组件。但是，在这里，当我尝试从Firebase发送成功消息后向Redirect用户发送信息时，重定向将无条件地工作。我使用条件运算符重定向。这是Login.js

的核心

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { BrowserRouter as Router, Redirect} from 'react-router-dom';
import { Button, Card, CardContent, Paper, Typography, TextField, Tabs, Tab,FormControl } from '@material-ui/core';
import DateFnsUtils from '@date-io/date-fns';
import {
    MuiPickersUtilsProvider,
    KeyboardDatePicker,
  } from '@material-ui/pickers';
import DataField from './DataField';
import * as firebase from 'firebase';

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        margin: 'auto',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    cards: {
        maxWidth: 300,
        margin: 'auto',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    },
    formControl: {
        padding: theme.spacing(2),
        margin: 'auto',
        display: 'flex',
        flexDirection: 'column',
        justigyContent: 'space-around'
    },
    field: {
        minWidth: 250
    }
}));


function Login(){
    const classes = useStyles();
    const [email, setMail] = React.useState();
    const [pass, setPass] = React.useState(new Date( '1995-08-18T21:11:54' ));
    const auth = firebase.auth();
    const handleDateChange = Date => {
        const values = Date.toString();
        setPass(values)
    }
    const handlerMail = e => {
        setMail(e.target.value);
    }
    const verify = () => {
        const promise = auth.signInWithEmailAndPassword(email, pass);
        promise.catch(e => console.log(e.message));
        firebase.auth().onAuthStateChanged((user) => { 
               return ( user ? <Redirect from='/' to='/datafield' />  :  <Redirect from='/' to='/' /> )
        })
    }
    return(
        <React.Fragment className={classes.root}>
        <Card className={classes.cards} elevation={0}>
        <Typography variant='h5' color='primary'>Login</Typography>
            <CardContent>
                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <FormControl className={classes.formControl}>
                    <TextField id="standard-basic" value={email} onChange={handlerMail} className={classes.field} label="Email"  />
                    <KeyboardDatePicker
                        margin="normal"
                        id="date-picker-dialog"
                        label="Date of Birth"
                        format="MM/dd/yyyy"
                        value={pass}
                        onChange={handleDateChange}
                        KeyboardButtonProps={{
                            'aria-label': 'change date',
                        }}
                        />
                </FormControl>
                </MuiPickersUtilsProvider>
            </CardContent>
            <Button color='third' onClick={verify} variant='contained'>Login</Button>
        </Card>
        </React.Fragment>
    )
};

export default Login;

我已经工作了几天来解决它！尚未找到！！！有人可以帮我解决这个问题吗？谢谢！

Answer 1

尝试histroy.replace，文档：https://reacttraining.com/react-router/web/api/history

用Router HOC包装登录组件。 export default withRouter(Login);

const verify = () => {
  const { history } = props;
  const promise = auth.signInWithEmailAndPassword(email, pass);
  promise.catch(e => console.log(e.message));
  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      history.replace("/datafield");
    }
  });
};

条件重定向在react-router-dom中不起作用

1 个答案: