Nextjs Folder Routing Inside Pages Sub-Folder - next.js

Question

I am new to Nextjs and Stackoverflow so I will try to describe my issue as best as possible.
I have created the following folder structure in my project:
pages
api folder
index.js
sys-admin folder
createvenue.js
createuser.js
index.js
Inside sys-admin>index.js, I have a button with an onClick handler that uses next/router to push to the createvenue.js route. When I type in the URL http://localhost:3000/sys-admin/createvenue, I can see the createvenue.js page however, when I click the button in the http://localhost:3000/sys-admin page, I am directed to http://localhost:3000/createvenue which gives me a 404. My understanding was that the folder name (in this case sys-admin) would become the root and would be added to the router path to make the URL http://localhost:3000/sys-admin/createvenue.
Here is my sys-admin>index.js code:
import { useRouter } from "next/router";
export default function CreateCustomer() {
const router = useRouter();
const handleSubmit = () => {
router.push("/createvenue");
};
return (
<>
<form onSubmit={handleSubmit}>
<button className="btn btn-filled">Create New Customer</button>
</form>
</>
);
}
Here is my createvenue.js code:
import { useRouter } from "next/router";
export default function CreateVenue() {
const router = useRouter();
const handleSubmit = () => {
router.push("/createusers");
};
return (
<>
<form onSubmit={handleSubmit}>
<input type="text" placeholder="Enter venue name" />
<button className="btn btn-filled">Next</button>
</form>
</>
);
}
I've also tried adding /sys-admin to router.push("/sys-admin/createvenue"); but it still doesn't work.
Is there a way to get next/router to add the sys-admin root to the URL?

Answer 1

The default Behaviour of the form is to refresh the Page once it submitted. You have to prevent the form event from refreshing the page.
export default function CreateVenue() {
const router = useRouter();
const handleSubmit = (event) => {
// preventing the form event from refreshing the page
event.preventDefault()
router.push("/createusers");
};
return (
<>
<form onSubmit={(e)=>handleSubmit(e)}>
<input type="text" placeholder="Enter venue name" />
<button className="btn btn-filled">Next</button>
</form>
</>
);
}