React роутер не перенаправляет прагматично

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-запрос, но после этого переадресация не выполняется.пожалуйста, помогите мне.Я использую материал-UI Я в замешательстве, что, где находится функция рендеринга.

Answer 1

<Redirect /> похож на компонент и может использоваться там, где вы написали html / jsx.здесь вы возвращаете его, но он не попадает в дом / с другим HTML.если вы хотите программно перенаправить, вы можете использовать функции, предоставляемые самим «response-router-dom».но для этого ваш компонент должен быть как-то связан с компонентом Route, чтобы вы могли иметь доступ к их функциям в ваших подпорках.если ваш компонент не связан с вами, вы все равно можете получить доступ к этим функциям, обернув ваш компонент HOC, предоставленным реагирующим маршрутизатором.

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

и оберните ваш компонент им (экспортируйте его вконец)

export default withRouter(Home)

теперь вы можете получить доступ к их функциям, просто используйте:

props.history.replace('/avout') 

вместо использования <Redirect /> не забудьте получить реквизит там, где вы находитесьнаписание определения функции

const Home = function(props){}

О вашей путанице по поводу того, что компонент materiel-ui не имеет метода рендеринга, это функциональный компонент, методы рендеринга находятся в компонентах класса подробнее о функциональных компонентах здесь. Material ui прекратил поддержку компонентов класса после версии 4. Вы все еще можете использовать их в ранних версиях, т.е. 3.9.