Estoy tratando de cambiar el componente después de hacer clic en el botón. He definido una función changeComp () en la clase de mi componente y cuando se hace clic en el botón, quiero enrutarlo al componente de conexión de billetera, pero parece que no funciona. Amablemente, ayúdenme, ¿qué me estoy perdiendo aquí o por qué esta práctica es incorrecta?
changeComp(){ return ( <Router> <Switch> <Route exact path="/wallet-connect" component={WalletConnect} /> </Switch> </Router> );} <button className="btn w-100 mt-3 mt-sm-4" onClick={(event) => this.changeComp(event)} type="submit">Sign In</button>changeComp(){ const history = useHistory(); return ( <Router> <Switch> <Route exact path="/wallet-connect" component={WalletConnect} /> </Switch> </Router> <button className="btn w-100 mt-3 mt-sm-4" onClick={(event) => history.push("/wallet-connect")} type="button">Sign In</button> );}No puede devolver JSX desde un controlador de eventos y esperar que se represente en el DOM.
En su caso, debe representar la Route "/wallet-connect" en su enrutador principal y en la devolución de llamada de changeComp invocar una navegación imperativa.
enrutador principal:
<Switch> ... <Route path="/wallet-connect" component={WalletConnect} /> ... </Switch>En componente con botón:
changeComp(event) { this.props.history.push("/wallet-connect"); } <button className="btn w-100 mt-3 mt-sm-4" onClick={(event) => this.changeComp(event)} type="submit" > Sign In </button>Si el componente no tiene los accesorios de ruta inyectados, deberá decorarlo con el componente de orden superior withRouter .
Sugerencia:
Dado que el botón es un type="submit" y si se representa dentro de un formulario, simplemente emita la navegación imperativa desde el controlador onSubmit del formulario.
submitHandler = event => { event.preventDefault(); ... this.props.history.push("/wallet-connect"); } ... <form onSubmit={this.submitHandler}> ... <button className="btn w-100 mt-3 mt-sm-4" type="submit" > Sign In </button> </form>Si el botón no forma parte de un formulario, especifique que el tipo de botón sea un "botón" para que no interfiera con ningún elemento del formulario.
<button className="btn w-100 mt-3 mt-sm-4" onClick={(event) => this.changeComp(event)} type="button" > Sign In </button>