I am trying to change my URL after a modal is clicked.

I had added an extra onClick to the button which called the modal, this was to a function - in that function I added some console logging. I could see the logging, but the URL didn't change.

The (original) button code is:

<button className='buttonCheck' onClick={checkAnswer}>CHECK MY ANSWER</button> <CheckAnswerModal showModal={showCongratsModal} onClose={() => setShowCongratsModal(false)} videoMessage={showCongratsURL} content={showWindowContent} size='med'/>

And the modal

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

function CheckAnswerModal({showModal = false, onClose = () =>{}, videoMessage, content, size}) {

  return (
    <Modal
      size={size}
      show={showModal} 
      onHide={onClose}
      backdrop="static"
      keyboard={false}
    >

    <Modal.Body>
      {videoMessage ? <video src={videoMessage} controls autoPlay> </video>: <div><center>{content}</center></div>}
    </Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={onClose}>
        Close
      </Button>
    </Modal.Footer>
  </Modal>
  )
}

export default CheckAnswerModal

Originally, I had added a new function to the calling page:

function GoHome() {
  console.log("redirecting")
  <Redirect to='/' />
}

and added this to the button onClick, I could see the logging, but no URL changing. I've done a bit of looking about and I am pretty sure this is not working as the modal is on screen. To get around this, in the GoHome() I even added a conditional (if the showModal is false, then do the logging)

I've seen some posts which talked about unmounting the component (now - this is something new to me, especially as I don't call any mount component explicitly.)

Am I missing something fundamental with redirect? Or can someone point me at what I am doing wrong (the redirect feels a little "hacky" just now, I need to redo a whole component I think, but this would work for now)