Why is React-router link not working on onClick function-CodePudding

 <Link to="/final-preview">
            <button  onClick={handleSubmit}>
              Final Preview
            </button>
 </Link>

So before the onClick function the Link was working perfectly but after it's not. I'd be really grateful if someone knows some specificity about router link :)

CodePudding user response：

You could potentially try useNavigate as a solution instead as

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

function ThisPage() {
  let navigate = useNavigate();

  const leavePage = () => {
    navigate("/final-preview");
  }
  
  return (
    <div>
      <button onClick = {leavePage}/>
    </div>
  )
}

export default ThisPage;

In the leave page method, you can handle submitting the preview, before navigating to the next link.

Hope this helps.

CodePudding user response：

Here is example

First Import React Router

import {
  Link as RouterLink,
  Route,
  Routes,
} from "react-router-dom";

Add code

<Link component={RouterLink} to="/final-preview">
      <button  onClick={handleSubmit}>
       Final Preview
       </button>
 </Link>