svelte kit routing and naming covention problem

Question

when i create a new svelte kit project the default file is +page.svelte if i change the name it wont render and if i try to link to other svelte file it wont work

<script>
  import { goto } from '$app/navigation';

  function handleMissionClick() {
    goto('/game/Mission');
  }
</script>

<div class="grid">

      <button class="button" on:click={handleMissionClick}>Mission</button>

</div>
for example when i click on mission it returns error 404 although game/mission path exists 

i tried searching for a way search where +page is configured so i can add other files as configurations but it didnt work

Answer 1

In SvelteKit, only +page.svelte is recognized as a page by the router. You cannot use differently-named svelte files as pages. Instead, place a +page.svelte in a folder with the desired name of the route.

For example, you could use the following routes structure to have a home page and a page for the mission game:

/src/routes
    +page.svelte
    /game
        /Mission
            +page.svelte

I recommend that you familiarize yourself with the Routing documentation for SvelteKit: https://kit.svelte.dev/docs/routing. The docs do a good job of explaining everything you can do with the router, including how to create pages.