I can't find an error in this code. I want to use a vue-router, but when I write the router code in main.js, nothing is displayed in the browser, and when I delete the router code, "Hello" appears in the browser, that is, the project starts working

main.js

import { createApp } from 'vue';
import App from './App.vue';
import {createRouter, createWebHistory}  from 'vue-router';

import gridPage from '../views/grid-page.vue'

const router = createRouter({
    // history: createWebHistory,
    routes: [
        {path: '/', name: 'Grid',  component:  gridPage},
    ]
});

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

App.vue

<script>


</script>

<template>
<p>Hello</p>
  <router-view></router-view>
</template>

<style>

</style>

grid-page.vue

<script>

import grid from '../src/components/grid.vue'
import sidebar from '../src/components/sidebar.vue'

let idi = 0;

export default {
  components: {
        grid,
        sidebar
  },
  data() {
    return {
    
    }
  },
}
</script>

<template>
  <div class="root">
      <sidebar />
      <grid />
  </div>
</template>

<style>
.root{
  display: flex;
  height: auto;
}
</style>