Error: Invalid route component

When I want to practice a navigation bar with vue, encountered a mistake with the invalid route component. This div cannot display anything. As to the hint of the console, I can find no way out.

app.js

import './bootstrap';

import { createApp } from "vue";

import router from './router/site.js';
import App from './components/app.vue';

createApp(App)
    .use(router)
    .mount('#app');

site.js

import { createWebHistory, createRouter } from "vue-router";

import Home from '../components/app.vue';
import Login from '../components/Auth/Login.vue';
import Register from '../components/Auth/Register.vue';

const routes = [
    {
        path: '/',
        name: 'Home',
        components: Home
    },
    {
        path: '/login',
        name: 'Login',
        components: Login
    },
    {
        path: '/register',
        name: 'Register',
        components: Register
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router

app.vue

<template>
    <NavVue></NavVue>
    <FooterVue></FooterVue>
    <router-view></router-view>
</template>

<script setup lang="ts">
import NavVue from '../components/Home/Layouts/Header.vue';
import FooterVue from '../components/Home/Layouts/Footer.vue';
</script>

Header.vue

<template>
    <nav class="navbar navbar-expand-lg bg-light">
        <div class="container-fluid">
            <router-link class="navbar-brand" :to="{ name: 'Home' }">Navbar</router-link>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'Home' }">Home</router-link>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'Login' }">Login</router-link>
                    </li>
                    <li class="nav-item">
                        <router-link class="nav-link" :to="{ name: 'Register' }">Register</router-link>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</template>

When I click on any link. I see this error in the console.

error