Cannot get URL Params from React Router

Question

I am using class Component and I am not able to get URL params

mport React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../App.css';
import axios from 'axios';

class showBookDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      book: {}
    };
  }

  componentDidMount() {
     console.log("Print id: " + this.props.match.params.id); // prints nothing
    axios
      .get('http://localhost:8080/api/books/' + this.props.match.params.id)
      .then(res => {
        // console.log("Print-showBookDetails-API-response: " + res.data);
        this.setState({
          book: res.data
        })
      })
      .catch(err => {
        console.log("Error from ShowBookDetails");
      })
  };

Here are my Routes

<BrowserRouter>
        <Routes>
          <Route exact path="/" element={<ShowBookList />}>
          </Route>
          <Route path="/create-book" element={<CreateBook />}>
          </Route>
          <Route path="/show-book/:id" element={<ShowBookDetails />}>
          </Route>
        </Routes>
      </BrowserRouter>

there are solutions for function components I am looking for a solution to a class component