ReactJS : React-to-print & Navigate : Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useRef) is not a function

Question

I try to do a sort of "go back" action. I have a page that is the preview of what I want to print with react-to-print. Everything works perfectly : components appears, when I click on "print" it works.

But when I want to click "retour" (go back) I have those two errors :

Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useRef) is not a function

react_devtools_backend.js:4012 The above error occurred in the <Navigate> component:

    at Navigate (http://localhost:3000/static/js/bundle.js:81894:5)
    at RapportPDF (http://localhost:3000/main.d1f84070147d70e39dd3.hot-update.js:57:69)
    at Routes (http://localhost:3000/static/js/bundle.js:82002:5)
    at Router (http://localhost:3000/static/js/bundle.js:81942:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:80874:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

There is my code :

import React, {useState, useRef} from 'react'
import {useLocation} from 'react-router-dom'
import rond from '../../assets/logo_rond.png'
import { useReactToPrint } from 'react-to-print'
import {Navigate} from 'react-router-dom'

import PageDeGarde from './1_page_de_garde';
import PageHow from './2_how';
import PageProduction from './3_production';
import PageRiskRDT from './4_risk_rdt';
import PageRiskRDTCarte from './5_risk_rdt_carte';
import PageRiskPrix from './6_risk_prix';
import PageResistance1 from './7_resistance1';
import PageRistance2 from './8_resistance2';
import PageOpti from './9_opti';
import Couv4eme from './10_4eme_couv';

function RapportPDF() {
    const { state } = useLocation();
    const { idExploit } = state;

    const componentRef = useRef={};
    const handlePrint = useReactToPrint({
        content: () => componentRef.current,
        documentTitle: 'rapport_DiagoRisk',
    })
    
    const [retour, setRetour]= useState(false)
    function handleClick(){
        setRetour(true)
    }
    if(retour){
        return <Navigate push to={`/simulations`} />
    }
    return (
        <>
        <div ref={componentRef}>
            <div className='enteteprint row entete'>
                <button className='ButtonHome' onClick={handleClick} style={{marginLeft:'10px', fontWeight:'bold', color:'#92D050', fontSize:'large'}} >Retour </button>
                <h1>Prévisualisation du rapport </h1>
                <img src={rond} className="LogoRond" alt=''/>
            </div>

            <div className="container" style={{marginBottom:'0px'}}>
                <PageDeGarde/>
                <PageHow/>
                <PageProduction idExploit={idExploit}/>
                <PageRiskRDT idExploit={idExploit}/>
                <PageRiskRDTCarte idExploit={idExploit}/>
                <PageRiskPrix idExploit={idExploit}/>
                <PageResistance1 idExploit={idExploit}/>
                <PageRistance2 idExploit={idExploit}/>
                <PageOpti idExploit={idExploit}/>
                <Couv4eme/>
            </div>
        </div> 
        <button className='validation' onClick={handlePrint} style={{marginTop:'10px',marginLeft:'1%', width:'98%', marginBottom:"10px"}}> Imprimer ce rapport </button>
        </>
    )
}

export default RapportPDF

I precise thats the methode use with works everyelse where in my App.

I tried :

• Mooving elements before or after the "useRef"
• the goback method of Navigate : <button onClick={() => navigate(-1)}>Go Back</button>

But I have still the smae mistakes

Can someone help me understand what seems to be the problem, please ?

Answer 1

The problem came from the

const componentRef = useRef={};

useRef is a fonction so it supposed to be like this :

const componentRef = useRef();