Question

我的反应代码未重定向。这是我的代码。我正在使用react-router-dom。并使用material-ui

    import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import  { Redirect } from 'react-router-dom'
import { browserHistory } from 'react-router-dom';
import Button from '@material-ui/core/Button';
import Hidden from '@material-ui/core/Hidden';
import TextField from '@material-ui/core/TextField';
import OutlinedInput from '@material-ui/core/OutlinedInput';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import axios from 'axios';

const useStyles = makeStyles(theme => ({
 bodycon: {
     position: 'fixed',
     left:0,
     right:0,
     bottom:0,
     top:0,
     display: 'flex'
 },
 lefthand: {
     flexBasis: '50%',
     flexGrow: 1,
     background: '#2979ff',
 },
 righthand: {
     flexBasis: '50%',
     flexGrow: 1,
     padding: '25px',
     overflow: 'scroll'
 },
 logocon: {
    background: 'url(https://i.imgur.com/pJZnNiQ.png) no-repeat',
    width: '100%',
    height: '200px',
    backgroundPosition: 'center center',
    backgroundSize: '90px 90px',
 },
 titletext: {
    fontFamily: 'Roboto',
    fontSize: '22px',
    fontWeight: '300',
    textAlign: 'center',
 },
 inputcon: {
    margin: '25px auto',
    maxWidth: '350px',
 },
 formControl: {
     width: '100%',
 },
 telField: {
     width: '100%'
 },
 button: {
     width: '100%',
     marginTop: '6px'
 }
}));

export default function Home() {
  const classes = useStyles();
  const [state, setState] = React.useState({
    country: 'bd',
    tel: '',
    phonevaildity: false,
    redirect: false
  });
  const inputLabel = React.useRef(null);
  const [labelWidth, setLabelWidth] = React.useState(0);
  React.useEffect(() => {
    setLabelWidth(inputLabel.current.offsetWidth);
  }, []);
  const handleChange = name => event => {
    setState({
      ...state,
      [name]: event.target.value,
    });
  };

  const form1 = (e) => {
    e.preventDefault();
    if(!state.country || state.tel.length<5) {
        setState({...state, phonevaildity: 'true'})
    } else {
        axios.get('https://api.myjson.com/bins/mu2gn')
        .then(res => {
            if(state.country === 'bd') {
                return <Redirect to="/avout"> //Nothing happens
            }
        })
    }
  }
  return (
    <div className={classes.bodycon}>
      <Hidden smDown>
        <div className={classes.lefthand}></div>
      </Hidden>
      <div className={classes.righthand}>
        <div className={classes.logocon}></div>
        <div className={classes.titletext}>Access your account</div>
        <div className={classes.inputcon}>
            <form method="post" onSubmit={form1}>
                <FormControl variant="outlined" className={classes.formControl}>
                    <InputLabel ref={inputLabel} htmlFor="outlined-country-native-simple">
                      Country
                    </InputLabel>
                    <Select native value={state.country} onChange={handleChange('country')} input={<OutlinedInput name="Country" labelWidth={labelWidth} id="outlined-country-native-simple" />}>
                      <option value={'bd'}>Bangladesh</option>
                      <option value={'in'}>India</option>
                      <option value={'pk'}>Pakistan</option>
                    </Select>
                </FormControl>
                <TextField error={state.phonevaildity} name="tel" id="outlined-tel" label="Phone number" onChange={handleChange('tel')} onFocus={() => setState({...state, phonevaildity: false})} autoComplete="off" type="tel" className={classes.telField} margin="normal" variant="outlined" />
                <Button type="submit" variant="contained" size="large" color="primary" className={classes.button}>NEXT</Button>
            </form>
        </div>
      </div>
    </div>
  );
}

在我的if子句中，它不起作用。单击按钮时，会发生HTTP请求，但此后没有任何重定向。请帮助我。我正在使用material-ui，我很困惑渲染功能在哪里。

Answer 1

<Redirect />就像一个组件，可以在编写html / jsx的地方使用。在这里，您要归还它，但它不会与其他html一起进入dom /。如果要以可编程方式重定向，则可以使用“ react-router-dom”本身提供的功能。但为此，您的组件必须以某种方式与Route组件连接，以便您可以在道具中访问其功能。如果您的组件未连接，则仍然可以通过使用react-router提供的HOC包装您的组件来访问那里的功能。

import {withRouter} from 'react-router-dom'

并用它包装您的组件（最后将其导出）

export default withRouter(Home)

现在您可以访问它们的功能，只需使用：

props.history.replace('/avout')

代替使用<Redirect /> 不要忘记在编写函数定义时获取道具

const Home = function(props){}

关于您对Materiel-ui组件没有render方法的困惑，它是一个功能组件，render方法位于类组件read more about functional components here.中 Material ui已终止对版本4之后的类组件的支持。您仍可以在早期版本（即3.9）中使用它们。

React Router不能实用地重定向

1 个答案: