2
votes

Redirection d'URL depuis les gestionnaires d'événements dans React v4

Je suis nouveau sur React et je rencontre un problème de redirection vers une nouvelle page à l'aide de gestionnaires d'événements JavaScript. Je ne sais pas ce que je ne fais pas correctement.

App.js

import React, { Component } from 'react';
import {Redirect} from 'react-router-dom';

class Users extends Component {

  constructor(){
    super();
    this.state = { 
      name:aminu
    };
  }

  gotoURL(usr){
    let url = `/user/${usr}`;
    //console.log(url);
    return <Redirect to={url}/>
  }

  render() {    
     return (    
        <div className="container">
             <button onClick={this.gotoURL.bind(this, this.state.name)}>
               Go to {this.state.name} page
            </button>
        </div>
    );
  }
}

export default Users;

Users.js

import React, { Component } from 'react';
import {Switch, Route} from 'react-router-dom';

import Nav, {Jumbotron} from '../partials/headobjs';
import Footer from '../partials/footer';
import Users from '../components/user';
import UserObj from '../components/userobj';
import Err404 from '../components/err404';

//import css files.. 
import '../css/styles.css';


class App extends Component {
  render() {
    return (
      <div>
          <Nav />      
          <Jumbotron/>   

          <Switch>
            <Route exact path='/' component={Users}/>
            <Route path='/user' component={UserObj}/>
            <Route component={Err404} />
          </Switch>

          <div className='clr'></div>

          <Footer />
      </div>      
    );
  }
}

export default App;

Je veux que la fonction gotoURL redirige vers une nouvelle route, mais je ne suis pas sûr de ce que je fais mal, j'ai essayé d'utiliser browserHistory , et maintenant je ' J'ai essayé la classe mais en vain.

javascript reactjs react-router

0 commentaires

3 Réponses :

3
votes

Le composant

Redirect doit être rendu et non retourné au gestionnaire onClick, c'est pourquoi il ne fonctionne pas. Vous pouvez utiliser history.push à la place de

gotoURL(usr){
    let url = `/user/${usr}`;
    //console.log(url);
    this.props.history.push(url);
  }

2 commentaires

aussi simple que cela, comment se fait-il que je ne sois pas tombé sur ça, merci patron .. travail ..

Heureux d'avoir aidé :)

1
votes

Au lieu de rediriger depuis la fonction, utilisez la méthode de rendu et l'état vers l'entraînement avec le problème de redirection

class Users extends Component {

    constructor(){
        super();
        this.state = {
            name:'aminu',
            toUser: false
        };
    }

    gotoURL(usr){
        let url = `/user/${usr}`;
        //console.log(url);
        this.setState({toUser:true, goto: url})
    }

    render() {

        if (this.state.toUser === true) {
            return <Redirect to={this.state.goto}/>
        }

        return (
            <div className="container">
                <button onClick={this.gotoURL.bind(this, this.state.name)}>
                    Go to {this.state.name} page
                </button>
            </div>
        );
    }
}

0 commentaires

0
votes

Vous pouvez utiliser le composant Link de react-v4 pour modifier votre itinéraire.

import { Link } from 'react-router-dom';

<div className="container">
    <Link to={`/user/${usr}`}
        <button>
          Go to {this.state.name} page
        </button>
    </Link>
</div>

0 commentaires