I am teaching myself Sveltekit and my button is not taking me to the page it's supposed to, instead I get a 404 not Found. The file name in the routes folder is exactly the same as what I passed into the on:click={}
<script>
import { goto } from '$app/navigation';
</script>
<header class="sticky top-0 z-30">
<nav class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<a href="/" class="text-2xl font-bold">redis-book</a>
</div>
</div>
<div class="flex items-center">
<button
type="button"
class="bg-gray-500 hover:bg-gray-700 disabled:bg-gray-300 py-2 px-4 flex justify-center items-center text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-full h-8"
on:click={() => goto('/upload-notebook')}
>
<span class="material-icons mr-1" style="font-size:20px;">add</span>
Upload Notebook
</button>
<button
type="button"
class="bg-blue-500 hover:bg-blue-700 disabled:bg-blue-300 py-2 px-4 flex justify-center items-center text-white transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-full h-8"
on:click={() => goto('/new-notebook')}
>
<span class="material-icons mr-1" style="font-size:20px;">add</span>
New Notebook
</button>
</div>
</div>
</div>
</nav>
</header>
The new-notebook.svelte content is correct:
<script>
const titles = [
"My Past Skin Notebook",
"My Fitting Mine Notebook",
"My Amazing Journey Notebook",
"My Adventurous Tale Notebook",
"My Creative Ideas Notebook"
];
function getRandomTitle() {
return titles[Math.floor(Math.random() * titles.length)];
}
let title = getRandomTitle();
</script>
<div class="p-4">
<div class="bg-gray-100 p-4 rounded shadow">
<span class="text-xl font-bold">{title}</span>
</div>
</div>
Vite looks properly configured in svelte.config.js:
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: vitePreprocess(),
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;
I cannnot make out why it cannot find the new-notebook.svelte page.
Place the contents of new-notebook.svelte inside src/routes/new-notebook/+page.svelte.