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