The +error page not rendered

[devappbox]

Hello,

I have a link in +page.svelte page in routes folder

routes/+page.svelte.js

<a href="/contacts" class="btn btn-primary max-w-xs">Contacts</a>

clicking it will direct to contacts route (routes/contacts consisting 3 files +page.server.js, +page.svelte, +error.svelte).

routes/contacts/+page.svelte.js

<script>
	import { enhance } from '$app/forms';	
</script>

<form method="POST" action="?/create" use:enhance>
    <button>Add</button>
</form>

routes/contacts/+page.server.js

import { error } from "@sveltejs/kit"

export const load = () => {  
  return {}
}

export const actions = {
  create: async () => {
    throw error(400, {
        message: 'Name must be at least two characters.'        
    });  
  },  
}

routes/contacts/+error.svelte

<script>
    import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h1>

If I click Add button, iit goes well, it will render +error.svelte page.

But the problem is if i call/type, let's say http://localhost:5173/contacts in browser directly, andI click Add button, it wiill not render +error.svelte page.

Can anyone explain where the problem is ?

Thank You.