Router view component on root path ('/') route fails render with Suspense

[wtcodeai]

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

[EatherToo]

try like this

[wtcodeai]

Does not change anything

[posva]

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>

[wtcodeai]

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

[wtcodeai]

@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

[posva]

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