React 无法解构 'this.props.match' 的 属性 'params',因为它未定义
React Cannot destructure property 'params' of 'this.props.match' as it is undefined
我设置了一条路线来呈现单个项目的详细信息,但它抛出一个错误,指出 'this.props.match' 未定义。因此不能解构
这是我的代码片段
class ProfilesSinglePage extends Component {
constructor (props) {
super (props)
this.state={
details:''
};
}
render(){
console.log(this.props);
const {params} = this.props.match;
return (
<React.Fragment>
<h1>Profiles Details for id {params.id}</h1>
</React.Fragment>
);
};
componentDidMount(){
console.log(this.props.match.params.id);
axios.get(`${Profiles}/${this.props.match.params.id}`)
.then((res) => {
this.setState({details:res.data})
});
};
};
路线如下
<Routes>
<Route path="/profiles" exact element={<ProfilesAllPage/>}/>
<Route path="/profile-details/:id" exact element={<ProfileSinglePage/>}/>
</Routes>
您使用的是 React v6 版本,因此要访问参数,您需要从 react-router-dom 导入 useParams,然后创建一个钩子来访问 URL 参数。
为了更好地理解访问-
https://www.codingdeft.com/posts/react-get-query-and-url-parameters/#reading-url-parameters
我设置了一条路线来呈现单个项目的详细信息,但它抛出一个错误,指出 'this.props.match' 未定义。因此不能解构
这是我的代码片段
class ProfilesSinglePage extends Component {
constructor (props) {
super (props)
this.state={
details:''
};
}
render(){
console.log(this.props);
const {params} = this.props.match;
return (
<React.Fragment>
<h1>Profiles Details for id {params.id}</h1>
</React.Fragment>
);
};
componentDidMount(){
console.log(this.props.match.params.id);
axios.get(`${Profiles}/${this.props.match.params.id}`)
.then((res) => {
this.setState({details:res.data})
});
};
};
路线如下
<Routes>
<Route path="/profiles" exact element={<ProfilesAllPage/>}/>
<Route path="/profile-details/:id" exact element={<ProfileSinglePage/>}/>
</Routes>
您使用的是 React v6 版本,因此要访问参数,您需要从 react-router-dom 导入 useParams,然后创建一个钩子来访问 URL 参数。
为了更好地理解访问- https://www.codingdeft.com/posts/react-get-query-and-url-parameters/#reading-url-parameters