Errores informados al usar Switch y Redirect en el enrutamiento en React (una ＜Route＞ solo debe usarse como elemento secundario del elemento ＜Routes＞)

1. Introducción

1.1 El uso de componentes Switch y Redirect en React puede mejorar la disponibilidad y confiabilidad del enrutamiento. A continuación te presentamos una breve introducción a sus principales beneficios:

Componente Switch: el componente Switch se utiliza para la coincidencia de rutas. Solo representará el primer componente de ruta o redireccionamiento coincidente. Esto significa que puede incluir componentes de ruta y redireccionamiento en un conmutador y asegurarse de que como máximo una ruta coincida con la ruta actual. Esto no sólo evita el montaje innecesario de componentes sino que también mejora el rendimiento de su aplicación.

Componente de redireccionamiento: el componente de redireccionamiento se utiliza para redirigir automáticamente a otra página o URL según las condiciones dadas. En general, podemos utilizar el componente Redirect para redirigir a los usuarios de una página antigua a una página nueva para gestionar mejor el enrutamiento en la aplicación.

2. Solución

2.1. Sin embargo, reaccionar-router-dom en reaccionar V6 ha eliminado Switch y Redirect
y usa Routes y Navigate en su lugar, y el método de escritura es diferente
. Ejemplo:

//v5版本
   <Switch>
      <Route path='/about' component={
    
    About} />
      <Route path='/home' component={
    
    Home} />
 	  <Redirect to="/home" />
   </Switch>

//v6版本
<Routes>
   <Route path='/home' Component={
    
    Home} />
   <Route path='/learn' Component={
    
    Learn} />
   <Route path='/exchange' Component={
    
    Exchange} />
   <Route path='/task' Component={
    
    Task} />
   <Route path='/myInfo' Component={
    
    MyInfo} />

  <Route path="*" element={
    
    <Navigate to="/home" />} />
  </Routes>