I’m trying to create a new page after submitting a form to the server then redirecting the client to this new page. After redirecting, I get an error 404 and after a refresh it work (at least in dev, i didn’t tried in production). So I add a delay to the redirect, which… it work half of the time.
Here the content of my +page.svelte
<form method="POST" action="?/create">
<label>
Title
<input name="title" type="text">
</label>
<label>
URL
<input name="URL" type="text">
</label>
<button>Submit</button>
</form>
And of +page.server.js
import { redirect } from '@sveltejs/kit';
import * as fs from 'node:fs';
/** @type {import('./$types').Actions} */
export const actions = {
create: async ({ request }) => {
const data = await request.formData()
//const gameTitle = data.get('title')
const gameURL = data.get('URL')
const fileTemplate = '<script>n import Template from "../template.svelte";n</script>nn<p>I am the page file</p>n<Template />'
fs.mkdir(`./src/routes/(games)/${gameURL}/`, (error) => { console.error(error) })
fs.writeFile(`./src/routes/(games)/${gameURL}/+page.svelte`, fileTemplate, (error) => { console.error(error) })
setTimeout(redirect(303, `/${gameURL}`), 3000)
return { success: true }
},
delete: async (event) => { // TODO: delete selected page },
update: async (event) => { // TODO: change options on a file already created }
};
This should add a folder with the name chosen, and then a svelte file with content alredy in.
It should look like this in routes folder :
routes
| - (games)
| - [This should be gameURL]
| - +page.svelte
atm here is the content of +page.svelte
<script>
import Template from "../template.svelte";
</script>
<p>I am the page file</p>
<Template />
In theory template.svelte should only give out the shape of the page and all other +page.svelte within folder should have colors and image but that just for context.
Thanks for any help ^^.
Nako is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.