........................... UserPage.js file ...........................

import React, { Component } from 'react'
import {getUser} from '../../Api/Users-axios'
import ViewUserComp from '../ViewUserComp/ViewUserComp'

export class UserPage extends Component {
  state = {
     user:{}
}

componentDidMount = () => {
    console.log('ccccc');
    console.log(this.props);
    console.log(this.state.user);

    const id = this.props.match.params;
    console.log(id);
    getUser(id).then(response => {
        this.setState({
            user: response.data
        });
    })
        .catch(error => {
            alert('error');
        });
}

render() {
    return (
    <div>
        <h2>User Page</h2>
        <ViewUserComp user={this.state.user} />  
    </div>
    )
}
}
export default UserPage;

........................... Users-axios.js file ...........................

import axios from "axios";
export async function getUsers() {
   const response = await 
   axios.get('https://jsonplaceholder.typicode.com/users');
   console.log(response);
   console.log(response.data);
   return response;
}
export async function getUser(id) {
  const response = await 
  axios.get('https://jsonplaceholder.typicode.com/users/'+id);
  return response;
}

........................... App.js file ...........................

 <Route path='/users/:id' exact element={<UserPage />}  />

enter image description here