I have three pages
home/start
import { useRouter } from 'next/router';
const Start = () => {
const router = useRouter();
return (
<>
<button
onClick={() => {
router.push('/home/users/native');
}}
>
GO
</button>
</>
);
};
export default Start;
home/users/[type]
import { useRouter } from 'next/router';
const User = () => {
const router = useRouter();
return (
<>
<button
onClick={() => {
router.push('/home/settings/subscription');
}}
>
Go Again
</button>
</>
);
};
export default User;
home/settings/type
const Settings = () => {
return <div>Confirm docs</div>;
};
export default Settings;
I navigate from home/start to /home/users/native by clicking on the button, then to /home/settings/subscription.Then, I click on the back button to go back to home/users/native.Now, when I click on forward button to get to home/settings/subscription, I get the following error
Error: The provided as value (/home/settings/subscription) is incompatible with the href value (/[type]).
I am not using as anywhere.Can someone point out as to what I am doing wrong?
You could use Link instead of a button with onClick.
import Link from 'next/link';
import { useRouter } from 'next/router';
const Start = () => {
const router = useRouter();
return (
<>
<Link to="/home/users/native">
GO
</Link>
</>
);
};
export default Start;