0
votes

redirection stubbed dans react-router-dom

J'essaye de rediriger vers un composant en cliquant sur un bouton, voici ce que j'ai fait:

import { Redirect, Router } from "react-router-dom";
class Home extends React.Component {
  state = {
    buttonState: ""
  };

  constructor(props) {
    super(props);
    this.buttonOnClick = this.buttonOnClick.bind(this);
  }

  buttonOnClick(e) {
    this.setState({ buttonState: e.target.id }, () => {
      console.log(this.state.buttonState);
    });
  }

  render() {
    if (this.state.redirect) {
      let url = "/" + this.state.redirect;
      console.log(url);
      return (
        <Router>
          <Redirect to={url} />
        </Router>
      );
    } else {
      return (
        <div>
          <button id={"users"} onClick={this.buttonOnClick}>
            See all users
          </button>
          <button id={"others"} onClick={this.buttonOnClick}>
            other
          </button>
        </div>
      );
    }
  }
}
export default Home;

Ici, il console.log parfaitement, mais il ne redirige pas. p>

Comment résoudre ce problème?

codesandbox.io

reactjs react-router-dom

0 commentaires

3 Réponses :

1
votes

Premièrement, j'ai découvert que vous n'avez pas déclaré redirect sous votre variable state , la seule variable qui s'y trouve est buttonState .

Cependant, je voudrais suggérer une autre façon de rediriger.

Vous pouvez envelopper chaque bouton sur une balise Link . Ce serait

<Link to="/your_route_here">
   <button ...> 
   </button>
</Link>

Vous pouvez également vous référer à la doc officielle de react-router-dom pour la balise Link ici .

1 commentaires

je peux vous lier, je veux utiliser la redirection spécifiquement

2
votes

Ok si vous voulez rediriger vers un chemin qui se trouve dans votre projet, vous pouvez le faire en utilisant ce code:

onClick = () => 
    windows.location.href = 'your route'

et si vous voulez rediriger l'utilisateur vers un chemin qui est ne se trouvant pas dans votre projet, utilisez ce code:

onClick = () => 
    this.props.history.push('your route');

0 commentaires

0
votes

<Router>
          <Redirect to={url} />
        </Router>
This will work, see my codesandbox.io

0 commentaires