Uncaught TypeError: невозможно прочитать свойство 'pu sh' неопределенного React js

Question

Я работаю над приложением React. Я использую Header. js Компонент в дочернем компоненте nnet другого компонента. когда я нажимаю ссылку, она не перенаправляется на другой компонент, отображается следующее сообщение об ошибке.

Uncaught TypeError: невозможно прочитать свойство pu sh из undefined

Версия с использованием «react»: «^ 16.12.0», «react-router-dom»: «^ 5.1.2»,

Обыскано много из переполнения стека, но никто не работает. Пожалуйста, помогите

Заголовок. js

    import React from 'react';
import axios from 'axios';
import { history } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
//import { useHistory } from "react-router-dom";--> Not Working

class Header extends React.Component {    

constructor(props) {
    super(props)
    this.state = {
        Search: '',
        guid:'',
        activeOption: 0,
        filteredOptions: [],
        showOptions: false,
        userInput: ''
    }
    this.onChangeSearch = this.onChangeSearch.bind(this);
    this.routeChange = this.routeChange.bind(this);
    this.Redirect = this.Redirect.bind(this);
}

onChangeSearch= (e) => {
    this.setState({ Search: e.target.value })       

     const obj = {
        User_Guiid:guid,
        Search:this.state.Search
     }
     if(this.state.Search!="")
     axios.post('http://localhost:xxxx/Api/Authenticate/Searchuser', obj }).then(response => {
        // console.log(response.data)  
         if(response.status=="200")
         {
            this.setState({
                filteredOptions:response.data
            })
            console.log(this.state.filteredOptions)
         }
      })
      .catch((error) =>{
        alert("Your Session time expired.Please Login Again."+error);
        this.props.history.push('/');   --> Redirect Working
     });

 e.preventDefault();
}
handleClick = (e) => {

    e.preventDefault();
    var guid= localStorage.getItem('Guiid');
    console.log(guid);
  //  this.props.history.push('/')
    this.props.history.push('/Profile/'+guid);--> Redirect Not Working

}
routeChange() {
    var guid= localStorage.getItem('Guiid');
    this.props.history.push('/Profile/'+guid);--> Redirect Not Working

  }
  Redirect(){
    var guid= localStorage.getItem('Guiid');
    this.props.history.push('/dashboard/'+guid);--> Redirect Not Working

  }
  Follow(e,guid){
    this.props.history.push('/follow/'+guid);--> Redirect Not Working
  }
  Clear(){
    this.setState({ Search: ''})
    window.location.reload();
  }
  Follows(e,guid){
  //const history = useHistory();
    console.log(guid)
    var id= localStorage.getItem('Guiid');   
    if(guid==id)
    {           
     //history.push('/follow/'+guid) --> Redirect Not Working;
      this.props.history.push('/follow/'+guid);--> Redirect Not Working
    }else{
     //history.push('/follow/'+id) --> Redirect Not Working;
      this.props.history.push('/follow/'+id);--> Redirect Not Working
    }

 }

render() {

    return (


        <nav className="NXc7H jLuN9">
            <div className="XajnB"></div>
            <div>
                <div className="_8MQSO  Cx7Bp">
                    <div className="_lz6s  ">
                        <div className="MWDvN  ">
                            <div className="oJZym">
                                <a href='' onClick={() => this.Redirect()}>
                                    <div className="   Igw0E   rBNOH    eGOV_   ybXk5    _4EzTm   ">

                                        <div className="SvO5t"></div>
                                        <div className="cq2ai">
                                            <img alt="" className="s4Iyt" src={Logo} />
                                        </div>
                                    </div>
                                </a>
                            </div>

                            <div className="LWmhU _0aCwM">
                                <input className="XTCLo x3qfX " type="text" autoCapitalize="none" placeholder="Search" value={this.state.Search} onChange={this.onChangeSearch} />
                                <span className="mlrQa coreSpriteSearchIcon sprite_search"></span>
                                {                  
                                     this.state.filteredOptions.map((user)=>{                    
                                  return (                       
                                   user.length != 0?
                                <div className="jLwSh" role="dialog"></div>
                                :null
                                )
                             })
                          }  
                                <div className="kbKz8">

                                 <div className="VR6_Q"></div>
                                  <div className="drKGC">
                                  {                  
                                     this.state.filteredOptions.map((user)=>{                    
                                  return (                       
                                   user.length != 0?
                                    <div className="fuqBx">
                                      <a className="yCE8d  " href="" onClick={(e) => this.Follows(e,user.User_Guiid)}>
                                       <div className="z556c">
                                         <div className="RR-M-  g9vPa" role="button" tabindex="0">
                                           <canvas className="CfWVH" height="42" width="42" style={{position: 'absolute', top: '-5px', left: '-5px', width: '42px', height: '42px'}}></canvas>
                                           <span className="_2dbep " role="link" tabindex="0" style={{width: '32px', height: '32px'}}>
                                           <img alt="" className="_6q-tv" src={require("../../img/Profile/"+user.UserImage)}/>
                                           </span>
                                          </div>
                                            <div className="_2_M76">
                                              <div className="uyeeR">
                                                 <span className="Ap253">{user.Username}</span>
                                                 <div className="JbY-k coreSpriteVerifiedBadgeSmall"></div></div>
                                                 <span className="Fy4o8">{user.Fullname}</span>
                                              </div>
                                        </div>
                                        </a>
                                    </div>
                                      :null
                                     )
                                  })
                               }  
                                </div>

                                </div>


                        </div>
                    </div>
                </div>
            </div>
        </nav>
    )
}
}
export default Header

Answer 1

Есть 2 способа вызвать историю pu sh.

1. Первый с HO C, который сRouter

Итак, в конце вы должны его обернуть. Затем вы можете использовать метод pu sh, например this.props.history.push()

export default withRouter(Header)

Второй - с помощью крючков. Насколько я знаю, вы должны использовать функциональный компонент для вызова ловушек, поэтому вам следует немного переписать свой код. Я думаю, что этот метод намного проще написать. Вы должны импортировать import { useHistory } from 'react-router-dom', а затем называть его как const history = useHistory(). Таким образом, вы можете вызвать метод pu sh, например history.push(), и не оборачивать свой компонент withRouter

Answer 2

Оберните ваш компонент в withRouter HO C, предоставленный из response-route-dom.

import React from 'react';
import axios from 'axios';
import { history } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import { useHistory, withRouter } from "react-router-dom";
....
....
..
export default withRouter(Header)

withRouter - компонент более высокого порядка который будет передавать ближайшее совпадение маршрута, текущее местоположение и свойства истории обернутому компоненту при каждом рендеринге. просто подключает компонент к маршрутизатору.