Comment rediriger sur un clic de bouton dans ReactJS

Question

Je veux rediriger vers './createadd.js' en cliquant (lorsque la fonction s'exécute). Comment puis-je? J'ai essayé d'utiliser history.push () et réagir au routeur mais aucun ne fonctionne.

APP.JS:

import { render } from '@testing-library/react';
import React from 'react';

class App extends React.Component {
  render(){

  this.selladd = () => {     //Function to redirect to another page

  }

  return (
  <div style={{position: "absolute", left: 1300, top: 25, overflowX: "hidden"}}>
    <button onClick={this.selladd}>Sell</button>
  </div>);
    }
}

export default App;

Answer 1

Vous pouvez rediriger vers l'une des pages en utilisant

this.props.history.push("your link here");

Ou si vous utilisez react-router-dom, vous pouvez également utiliser

<Redirect to="path" />

Ou pourquoi ne pas simplement envelopper votre bouton dans une balise href.

<a href ="link"> 
   <button>Click Here</button>
</a>

Answer 2

Vous devez rediriger vers un autre composant qui se trouve dans le fichier createadd.js à droite.

Enveloppez votre composant comme:

export default withRouter(App)

Et ajoutez un chemin à vos itinéraires tel que:

<Route exact path='/createadd' component={CreateAddComponent} />

Où CreateAddComponent, est votre composant importé du fichier createadd.js.

Alors dans ta fonction, fais juste

this.props.history.push('/createadd')

Answer 3

Vous pouvez utiliser à la fois le lien et history.push ()

 import { render } from '@testing-library/react';
    import React, { Component } from 'react';
    
    class App extends React.Component {
 constructor(props) {
        super(props);
this.selladd =this.selladd .bind(this);
}
selladd (){
 this.props.history.push({ pathname: ''  })
}
      render(){

      return (
      <div style={{position: "absolute", left: 1300, top: 25, overflowX: "hidden"}}>
        <button onClick={this.selladd}>Sell</button>
      </div>);
        }
    }

ou

import { Link } from 'react-router-dom';
     <Link to={{ pathname: '' }}  >
     <button onClick={this.selladd}>Sell</button>
      </Link>