Vue 3, vue-router console warn

I saw a warning on the console. I can not understand. Can someone explain ?

<template>
  <Navigation />
  <div class="container-fluid">
    <transition name="fade">
    <router-view />
    </transition>
  </div>
</template>

Console;

 /** [Vue Router warn]: <router-view> can no longer be used directly inside <transition> or <keep-alive>. Use slot props instead: */

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

devingray_

5 years ago

Level 8

<template>
  <Navigation />
  <div class="container-fluid">

          <router-view v-slot="{ Component }">
                <transition name="fade">
                   <component :is="Component" />
                 </transition> 
          </router-view>
  </div>
</template>

simonhawesome

3 years ago

Level 1

@devingray_ Did you experience any test errors upon making this change? I get the following:

TypeError: Cannot read properties of undefined (reading 'Component')

Please or to participate in this conversation.