How to redirect to another page from an if statement Reactjs-CodePudding

I am creating a virtual waldo game where you must find the characters from the image.

I am trying to make it so that when the game ends and the if statement is run it goes to another page the displays gameover. I have tried multiple ways to solve this such as using history.push or Navigate from the react-router-dom library but i cannot figure out how to get it to work

const Game = (props) => {
    const handleClickOption = (e) => {
        if (whichTarget.current === e.target.textContent.toLowerCase()) {
            if (e.target.textContent === 'Waldo') {
                setWaldoStyle(true);
            }
            if (e.target.textContent === 'Odlaw') {
                setOdlawStyle(true);
            }
            if (e.target.textContent === 'Wizard') {
                setWizardStyle(true)
            }
            console.log(e.target.textContent   ' found');
            hit.current  = 1

            console.log('this is hit'   hit.current);
            if (hit.current === 3) {
                //function to reset and end game
                console.log("running game over code");
                props.history.push('/gameover');
                console.log('gameover code after navigate');
            }
        }
        
        setRender(!render);
    }
    return (
        <div id="gamePage">
            <div id="stopwatch">{hour.current}:{minute.current}:{second.current}</div>
            <div id="gameBoard">
                <img id="gameBackground" src={gameBackground} alt="gameboard" onClick={handleClickTrue} onl oad={startTimer}></img>
                <div id="waldo" className="hitBox" onClick={handleClickOnTarget}></div>
                <div id="odlaw" className="hitBox" onClick={handleClickOnTarget}></div>
                <div id="wizard" className="hitBox" onClick={handleClickOnTarget}></div>
                <div id="popupContainer">
            </div>
                {render ? <Popup close={handleClickOption} coords={translate} colorWaldo={waldoStyle} colorOdlaw={odlawStyle} colorWizard={wizardStyle}/> : null}
            </div>
            <button onClick={stopTimer}>BREAK</button>
        </div>
    )
}

CodePudding user response：

If you wanted to redirect the user to another page if he lost you might use:

if (hit.current === 3) {
   //function to reset and end game
   console.log("running game over code");
   window.location = "./gameover";
   console.log('gameover code after navigate');
}

CodePudding user response：

I'm not sure what error you received when using props.history.push(), I can only assume that the history prop was not passed to your component (and that might be because of how your router was set up).

In any case, using window.location means using the browser API directly & doing things outside of the React Router context. If you want to fully use this library but aren't sure how to access the history prop for navigation, you could always get it by using the useHistory hook they provide:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}