react ts项目 在React.Component中如何获取url中的参数

Question

layout.tsx

import React from 'react';
import {  Route, Link, HashRouter as Router } from 'react-router-dom'
import About from 'views/about/about'
import Fun from 'views/fun/fun'

class Layout extends React.Component {
    render() {
        return (
            <div className="layout">
                <Router>
                    <Link to="/">index</Link>
                    <Link to="/about?name=about">about</Link>
                    <Link to="/fun?name=fun">fun</Link>

                    <Route path="/about">
                        <About>about</About>
                    </Route>
                    <Route path="/fun" component={Fun}></Route>
                </Router>
            </div>
        );
    }
}
export default Layout;

about.tsx

import React from 'react';
import { useLocation } from "react-router-dom";

function UseQuery() {
  return new URLSearchParams(useLocation().search);
}

class About extends React.Component {
    render() {
        let query = UseQuery(); // 报错的代码
        console.log('query', query.get("name"))
        return (
            <div className="infor-popverdd">
                <div>
                {JSON.stringify(this.props)}
                </div>
            </div>
        );
    }
}
export default About;

运行时报错