Resuelva el salto de enrutamiento del componente antd Advertencia: validateDOMNesting: <a> no puede aparecer como descendiente de <a>.

Esta advertencia aparece cuando usamos el componente Link para implementar un salto

Tome el componente de registro que ya tiene una cuenta para saltar al componente de inicio de sesión como ejemplo

import {Link} from 'react-router-dom' 
<Button><Link to='/login'>已经有账号</Link></Button>

El efecto es el siguiente:

Puede ver que el componente Vínculo tiene un estilo predeterminado, y será rojo cuando haga clic en él. No hay problema para usarlo y puede saltar libremente

Pero la consola informará la siguiente advertencia:

Esto significa que la etiqueta <a> no se puede repetir en la etiqueta <a>. Obviamente, el elemento DOM utilizado por el componente Button de antd es <a>. 

La solución usa la historia para lograr el salto.

toLogin(){
    this.props.history.push('/login')
  }

<Button onClick={()=>{this.toLogin()}}>已经有账号</Button>

Tanto history.push como history.replace pueden realizar el salto. La diferencia es que si usa push para hacer clic en la flecha izquierda hacia atrás en la interfaz de inicio de sesión, volverá a la interfaz de registro, pero no reemplazar.

El efecto es el siguiente:

Puedes ver que también nos ayudó a eliminar el estilo predeterminado, por qué no hacerlo.

En este punto, el problema está resuelto. 


 

Supongo que te gusta

Origin blog.csdn.net/a1059526327/article/details/106934509
Recomendado
Clasificación