无法读取未定义的 React Js 的属性"参数"

Question

我正在开发类似Insatgram的应用程序。我遇到了的问题

"未捕获(承诺中(类型错误：无法读取的属性'params'未定义">

我有一个非常相似的组件，它使用相同的方法从url中获取id，并且运行良好。我很困惑为什么一个在工作，另一个不在。

以及重定向到其他页面中的另一个问题，我显示了一个"this.props.history.push无法读取未定义的属性'props'"错误。

Follow.js:

import Popupfollower from '../Layout/Popupfollowfollower';
import React from 'react';
import axios from 'axios';
class follow extends React.Component {
constructor(props){
super(props)
this.state={
showfollowerPopup: false,
showfollowingPopup: false,
Follow:[]
}
}
togglePopfollower = (e) => {
this.setState({
showfollowerPopup: !this.state.showfollowerPopup
});
e.preventDefault();

};
togglePopfollowing = (e) => {
this.setState({
showfollowingPopup: !this.state.showfollowingPopup
});
e.preventDefault();
};
componentDidMount() {  
var  guid= this.props.match.params.id; - >>>This is Working Fine
var access_token = localStorage.getItem('access_token');
var username = localStorage.getItem('user');
// var guid= localStorage.getItem('Guiid'); 
axios.get('http://localhost:xxxx/Api/Authenticate/Getfollowingdetails'+'/'+ guid,  { headers: { Authorization: access_token,Username:username } }).then(response => {
// console.log(response.data)  
if(response.status=="200")
{
this.setState({
Follow:response.data
})
console.log(this.state.Follow)
}
})
.catch(function (error) {
alert("Your Session time expired.Please Login Again."+error);
this.props.history.push('/');   - >>>This is Not Working 
})
}
render() {

return (
<div id="react-root">
<Helmet>
<meta charSet="utf-8" />
<title> Follower • Instagram</title>
<link rel="icon" href="/insta.ico" />
</Helmet>
<section className="_9eogI E3X2T">
<Header/>
<div></div>
<main className="SCxLW  o64aR" role="main">
<div className="v9tJq  VfzDr">
{                 
this.state.Follow.map((follow)=>{
return (
follow.length != 0?
<header className="vtbgv">
<div className="XjzKX">
<div className="RR-M-" role="button" tabIndex="0">
<canvas className="CfWVH" height="168" width="168" style={{ position: 'absolute', top: '-9px', left: '-9px', width: '168px', height: '168px' }}></canvas>
<span className="_2dbep " role="link" tabIndex="0" style={{ width: '150px', height: '150px' }}><img alt="" className="_6q-tv" src={require("../../img/Profile/"+follow.UserImage)}  /></span>
</div>
</div>
<section className="zwlfE">
<div className="nZSzR">
<h1 className="_7UhW9       fKFbl yUEEX   KV-D4            fDxYl     ">{follow.Username}</h1>
<div className="Igw0E     IwRSH      eGOV_         _4EzTm">
<span className="BY3EC  bqE32">
<span className="vBF20 _1OSdk">
<button className="_5f5mN    -fzfL     _6VtSN     yZn4P   ">Following</button>
</span>
</span>
</div>
<div className="AFWDX">
<button className="dCJp8 afkep">
<span aria-label="Options" className="sprite _horizontal__outline__24__grey_9 u-__7"></span>
</button>
</div>
</div>
<ul className="k9GMp">
<li className="Y8-fY ">
<span className="-nal3">
<span className="g47SY ">{follow.Post_count}</span>
posts
</span>
</li>
<li className="Y8-fY ">
<a className="-nal3" onClick={this.togglePopfollower} href="">
<span className="g47SY ">{follow.Follower_count}</span>{this.state.showfollowerPopup ? <Popupfollower toggle={this.togglePopfollower} /> : null}
followers
</a>
</li>
<li className="Y8-fY " >
<a className="-nal3" onClick={this.togglePopfollowing} href="">
<span className="g47SY ">{follow.Following_count}</span>{this.state.showfollowingPopup ? <Popupfollowing toggle={this.togglePopfollowing} /> : null}
following
</a>
</li>
</ul>
<div className="-vDIg">
<h1 className="">{follow.Fullname}</h1>
<a className="yLUwa" href="" rel="me nofollow noopener noreferrer" target="_blank">{follow.Website}</a>
</div>
</section>
</header>
:null
);
})
}
<div className="fx7hk">
<a href="" className="_9VEo1 T-jvg">
<span className="smsjF">
<div className="spritesave"></div>
<span className="PJXu4">Posts</span>
</span>
</a>
</div>
{
this.state.Follow.map((follow)=>{
return (
follow.length != 0?
<div className="_2z6nI">
<article className="ySN3v">
<div>
<div style={{ flexdirection: 'column', paddingbottom: '0px', paddingtop: '0px' }}>
<div className="Nnq7C weEfm">
<div className="v1Nh3 kIKUG  _bz0w">
{
follow.UserPost.map(post =>{
return ( 
<a href="">
<div className="eLAPa">
<div className="KL4Bh">
<img alt="" className="FFVAD" decoding="auto" sizes="293px" src={require("../../img/Post/"+post.UploadFile)}  style={{ objectfit: 'cover' }} />
</div>
<div className="_9AhH0"></div>
</div>
<div className="qn-0x" style={{ backgroundcolor: 'rgba(0, 0, 0, 0.3)', display: 'none' }}><ul className="Ln-UN"><li className="-V_eO"><span>114</span><span className="_1P1TY spriteheart"></span></li><li className="-V_eO"><span>1</span><span className="_1P1TY spritebubble"></span></li></ul></div>
</a>
);
})
}
</div>
</div>
</div>
</div>
</article>
</div>
:null
);
})
}
</div>
</main>
<Footer/>
</section>
</div >
)
}
}
export default follow

PopupFollower。Js

class Popupfollowfollower extends React.Component {
constructor(props){
var files;
super(props);
this.state =  {
Follow:[]
}
}
handleClick = (e) => {
//  this.props.history.push('/profile')
this.props.toggle();
e.preventDefault();
};
componentDidMount() {         
this.follow();
}
follow= (e) => {
var  guid= this.props.match.params.id; - >>>This is Not Working 

var access_token = localStorage.getItem('access_token');
var username = localStorage.getItem('user');
//var guid= localStorage.getItem('Guiid'); 
axios.get('http://localhost:xxxx/Api/Authenticate/Getfollowfollowerdetails'+'/'+ guid,  { headers: { Authorization: access_token,Username:username } }).then(response => {
if(response.status=="200")
{
this.setState({
Follow:response.data
})
console.log(this.state.Follow)
}
})
.catch(function (error) {
alert("Your Session time expired.Please Login Again."+error);
this.props.history.push('/'); - >>>This is Not Working 
})
}
Follow(e,guid){
console.log(guid)
var id= localStorage.getItem('Guiid');   
if(guid==id)
{
this.props.history.push('/follow/'+guid);
}else{
this.props.history.push('/follow/'+guid);
}
}
render() {
return (
<div className="RnEpo Yx5HN" role="presentation">
<div className="pbNvD  fPMEg   " role="dialog">
<div>
<div className="eiUFA">
<div className="WaOAr"></div>
<h1 className="m82CD">Follower</h1>
<div className="WaOAr">
<button className="wpO6b " type="button" onClick={this.handleClick}>
<svg aria-label="Close" className="_8-yf5 " fill="#262626" height="24" viewBox="0 0 48 48" width="24"><path clipRule="evenodd" d="M41.1 9.1l-15 15L41 39c.6.6.6 1.5 0 2.1s-1.5.6-2.1 0L24 26.1l-14.9 15c-.6.6-1.5.6-2.1 0-.6-.6-.6-1.5 0-2.1l14.9-15-15-15c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0l15 15 15-15c.6-.6 1.5-.6 2.1 0 .6.6.6 1.6 0 2.2z" fillRule="evenodd"></path>
</svg></button>
</div>
</div>
</div>
<div className="   Igw0E     IwRSH      eGOV_        vwCYk         i0EQd  ">
<div style={{ height: '356px', overflow: 'hidden auto' }}>
<div style={{ flexDirection: 'column', paddingBottom: '795px', paddingTop: '0px' }}>
{                 
this.state.Follow.map((follow)=>{
return (
follow.User.length != 0?
follow.User.map(record =>{
return  (
<div className="    Igw0E   rBNOH        eGOV_     ybXk5    _4EzTm    XfCBB  HVWg4 ">
<div className="   Igw0E     IwRSH      eGOV_         _4EzTm       yC0tu   ">
<div className="RR-M- " role="button">
<canvas className="CfWVH" height="54" width="54" style={{ position: 'absolute', top: '-5px', left: '-5px', width: '54px', height: '54px' }}></canvas>
<a className="_2dbep qNELH kIKUG" href="" onClick={(e) => this.Follow(e,record.User_Guiid)}style={{ width: '44px', height: '44px' }}><img alt="mudasir_magry's profile picture" className="_6q-tv" src={require("../../img/Profile/"+record.UserImage)} /></a>
</div>
</div>
<div className="  Igw0E     IwRSH        YBx95      vwCYk    ">
<div className="  Igw0E     IwRSH      eGOV_         _4EzTm ">
<div className="_7UhW9   xLCgt      MMzan  KV-D4            fDxYl     ">
<a title="mudasir_magry" href="" onClick={(e) => this.Follow(e,record.User_Guiid)}>
<div className="  Igw0E     IwRSH      eGOV_     ybXk5    _4EzTm ">
<div className="_7UhW9   xLCgt       qyrsm KV-D4            fDxYl      rWtOq">
<div className="   Igw0E   rBNOH        eGOV_     ybXk5    _4EzTm   ">{record.Username}
</div>
</div>
</div>
</a>
</div>
</div>
<div className="   Igw0E   rBNOH  YBx95   ybXk5    _4EzTm    soMvl  ">
<button className="sqdOP  L3NKy   y3zKF     " type="button">Follow</button>
</div>
</div>
</div>
)
})
:null
)
})
} 
</div>
</div>
</div>
</div>
</div>
)
}
}
export default Popupfollowfollower;

App.js

<Router>
<Switch>
<Route path='/follow/:id' component={Follow} />
<Route path='/popupfollowfollower' component={Popupfollowfollower} />
</Switch>
</Router>

Answer 1

.catch((错误(=>｛alert("您的会话时间已过期。请再次登录。"+error(；this.props.history.push('/'(；｝(