Version

3.1.1

Reproduction link

https://github.com/wtcodeai/vue3-issue

Steps to reproduce

1. Use last version of vue router and vue 3 and Vite for build
2. Set up Vue Router with default root route { path: '/', component: Home }, where Home - any simple component, <div> Test </div> for example
3. Use

<router-view v-slot="{ Component }" :key="route.path">
       <Suspense>
           <component :is="Component" /> 
      </Suspense>
</router-view>

in main component for render route components.

What is expected?

When app initialized on '/' route Home component is rendered in router-view

What is actually happening?

Nothing renders

On the other routes all works fine, also without suspense all works fine on root path too

try like this

Does not change anything

You should add the key to <component> and place it right after suspense:

      <router-view v-slot="{ Component }">
        <div style="height: 100%">
          <Suspense>
            <component :is="Component" :key="route.path" />
          </Suspense>
        </div>
      </router-view>

@posva so, the problem was solved, but it was not in the component key:, the nested <div> hierarchy caused this, thanks for the solution

@posva Also your solution cause warning which mentioned earlier in other bug reports <Suspense> slots expect a single root node. And what we have Suspense with hierarchy like suspense => div => component has the problem mentioned in this topic Suspense with hierarchy like suspense => component (with or without <template #default>) triggers warning Think this will be fixed soon

There is already an open PR for that warning #2337. Remember to use the forum or the Discord chat to ask questions!