<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 :)
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.
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>