Can't navigate to external link in React-CodePudding

I tried the following and expected window.location.href=location to work for onClick, which is directing to a page hosted by the backend server, but React brings me to the same page with different x and y set in the URL query every time I click it.

This is an example of a page that it redirects me to: http://localhost:3000/course-page?x=258&y=110

Code

import Cookies from 'universal-cookie';
import syllabus from '../img/syllabus.svg';

function CoursePage() {

    
    const cookies = new Cookies();
    const courseName = cookies.get('courseName');
    

    function handleClick() {
        const location = cookies.get('syllabus');
        console.log(location);
        window.location.href=location;
    }

    return ( 
        <div id="course_page" className="course_page">
         <body>
            <h2 id="title">{courseName}</h2>
            <div className="form1" id="form1">
            <form>
                <div>
                    <input id="Course"  type="image" onClick={handleClick} src={syllabus}/> 
                </div>
            </form>
            </div>
            </body>
        </div>
      );
}

export default CoursePage;

CodePudding user response：

You should use onSubmit event

function handleClick(e) {
  e.preventDetaul()
  const location = cookies.get('syllabus');
  console.log(location);
  window.location.href=location;
}

<form onSubmit={handleClick}>
  <div>
    <input id="Course"  type="image" src={syllabus}/> 
  </div>
</form>

CodePudding user response：

import Cookies from 'universal-cookie'; import syllabus from '../img/syllabus.svg';

function CoursePage() {

const cookies = new Cookies();
const courseName = cookies.get('courseName');


function handleClick() {
    const location = cookies.get('syllabus');
    console.log(location);
    window.location.href=location;
}

return ( 
    <div id="course_page" className="course_page">
     <body>
        <h2 id="title">{courseName}</h2>
        <div className="form1" id="form1">
        <form>
            <div>
                <input id="Course"  type="image" onClick={handleClick} src={syllabus}/> 
            </div>
        </form>
        </div>
        </body>
    </div>
  );

}

export default CoursePage;