如何在 React 应用程序中启用打印，其中页面呈现为 <Route 下的部分>

问：

我已经启用了模块，react-to-print

import { useReactToPrint } from "react-to-print";

在本代码中，调用了 。App.jsxmain-presenter.jsx

import MainPresenter, {FLOW_PATH, MEMBER_HOME} from './presenters/main-presenter';

在 中，我有这样的代码，main-presenter.jsx

....
export const CONFIRMATION_PATH = '/confirmation';
....
return (
        <React.Fragment>
          .....
          <Route path={CONFIRMATION_PATH} render={() => <SectionPresenter section={confirmationSection} key={confirmationSection} returnToCart={props.returnToCart} openExitModal=
{props.openExitModal}/>}/>
          .....
          </React.Fragment>
         );

我如何复杂这个 DOM（Route 和 SectionPresenter）元素以将打印图标作为确认页面的一部分放置，并且对于单击，启用打印选项。

对于打印选项，我指的是链接，- https://www.npmjs.com/package/react-to-print

我拥有的代码是，

const dataToPrintRef = useRef();
const handlePrint = useReactToPrint({
    content: () => dataToPrintRef.current
});
function printModal({ handlePrint }) {
    printModal.propTypes = {
        handlePrint: PropTypes.func.isRequired
    };
    return (
        <button onClick={handlePrint}>Print</button>
    );
}
....
And in order to block the contect for print, we used,
{ cotentTag.propTypes =
                    ref: dataToPrintRef
                };