réagir bouton onClick page de redirection

Je suis en train de travailler sur une application web à l'aide de Réagir et bootstrap. Quand il s'agit de l'application de bouton onClick, ça me prend du temps dur de laisser ma page de redirection vers un autre. si, après un href , je ne peux pas aller la page d'un autre.

Serait vous s'il vous plaît dites-moi est-il besoin de l'aide de réagir de la navigation ou d'autres pour naviguer sur la page à l'aide du Bouton onClick ?

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {

  render() {
    return (
 <div className="app flex-row align-items-center">
        <Container>
     ...
                    <Row>
                      <Col xs="6">                      
                        <Button color="primary" className="px-4">
                            Login
                         </Button>
                      </Col>
                      <Col xs="6" className="text-right">
                        <Button color="link" className="px-0">Forgot password?</Button>
                      </Col>
                    </Row>
               ...
        </Container>
      </div>
    );
  }
}

voir ce stackoverflow.com/questions/31079081/...

InformationsquelleAutor Raju yourPepe | 2018-06-01

utilisation Réagir Routeur v4:

import { withRouter } from 'react-router-dom';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {
  constuctor() {
    this.routeChange = this.routeChange.bind(this);
  }

  routeChange() {
    let path = `newPath`;
    this.props.history.push(path);
  }

  render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
          <Row>
            <Col xs="6">                      
              <Button color="primary" className="px-4"
                onClick={this.routeChange}
                  >
                  Login
                </Button>
            </Col>
            <Col xs="6" className="text-right">
              <Button color="link" className="px-0">Forgot password?</Button>
            </Col>
          </Row>
          ...
        </Container>
      </div>
    );
  }
}

export default withRouter(LoginLayout);

Après l'utilisation de code ci-dessus, je suis toujours sur la même page. Ai-je besoin de faire tout travail supplémentaire autre que cela?
je suppose que non.. avez-vous envelopper votre composant avec withRouter ?
J'ai enveloppé mes composant avec withRouter. Il fonctionne parfaitement si je utiliser la même ressource, par exemple, il travaille pour la route /MyProfile. Mais cela ne fonctionne pas lorsque j'utilise /MyProfile/edit. Comment puis-je rediriger vers imbriquée de ressources?
pouvez-vous l'ajouter sandbox et me donner le lien afin que je puisse mieux pour résoudre votre problème

InformationsquelleAutor aravind_reddy

4

N'utilisez pas un bouton comme un lien. Au lieu de cela, utilisez un lien de style comme un bouton.
```
<Link to="/signup" className="btn btn-primary">Sign up</Link>
```
InformationsquelleAutor Waleed Qidan

Un simple gestionnaire de clic sur le bouton, et la mise window.location.hash fera l'affaire, en supposant que votre destination est également au sein de l'application.

Vous pouvez écouter le hashchange événement sur window, d'analyser l'URL que vous obtenez, appel this.setState(), et vous avez votre propre routeur simple, pas de bibliothèque nécessaires.

class LoginLayout extends Component {
    constuctor() {
      this.handlePageChange = this.handlePageChange.bind(this);
      this.handleRouteChange = this.handleRouteChange.bind(this);
      this.state = { page_number: 0 }
    }

  handlePageChange() {
    window.location.hash = "#/my/target/url";
  }

  handleRouteChange(event) {
    const destination = event.newURL;
    //check the URL string, or whatever other condition, to determine
    //how to set internal state.
    if (some_condition) {
      this.setState({ page_number: 1 });
    }
  }

  componentDidMount() {
    window.addEventListener('hashchange', this.handleRouteChange, false);
  }

  render() {
    //@TODO: check this.state.page_number and render the correct page.
    return (
      <div className="app flex-row align-items-center">
        <Container>
          ...
                <Row>
                  <Col xs="6">                      
                    <Button 
                       color="primary"
                       className="px-4"
                       onClick={this.handlePageChange}
                    >
                        Login
                     </Button>
                  </Col>
                  <Col xs="6" className="text-right">
                    <Button color="link" className="px-0">Forgot password </Button>
                  </Col>
                </Row>
           ...
        </Container>
      </div>
    );
  }
}

à l'aide de la fenêtre.l'emplacement n'est pas préférable pour ceux qui cherchent à maintenir toute forme de SPA (single page application). Vous avez changé l'url du navigateur et anéanti tout état, etc.
Quand vous dites "anéanti tous ses états", ce que vous avez à l'esprit, en particulier? Je suis à l'aide de location.hash, qui ne cause pas un rechargement de la page.

InformationsquelleAutor ouni

2

J'ai essayé de trouver une façon de Rediriger, mais a échoué. La redirection onClick est plus simple qu'on ne le pense. Il suffit de placer la base suivantes JavaScript dans votre onClick function:
```
window.location.href="pagelink"
```
InformationsquelleAutor Matteus Barbosa
1

Cela peut être fait très simplement, vous n'avez pas besoin d'utiliser une autre fonction ou d'une bibliothèque pour elle.
```
onClick={event =>  window.location.href='/your-href'}
```
InformationsquelleAutor rudresh solanki
0

Un moyen très simple de le faire est par le texte suivant:
```
onClick={this.fun.bind(this)}
```
et pour la fonction:
```
fun() {
  this.props.history.push("/Home");
}
```
finlay vous avez besoin d'importer withRouter:
```
import { withRouter } from 'react-router-dom';
```
et de l'exporter en tant que:
```
export default withRouter (comp_name);
```
InformationsquelleAutor Kareem Khaleel

À Réagir Routeur v5.1:

import {useHistory} from 'react-router-dom';
import React, {Component} from 'react';
import {Button} from 'reactstrap';
.....
.....
export class yourComponent extends Component {
    .....
    componentDidMount() { 
        let history = useHistory;
        .......
    }

    render() {
        return(
        .....
        .....
            <Button className="fooBarClass" onClick={() => history.back()}>Back</Button>

        )
    }
}

InformationsquelleAutor Harsha N Hegde

Vous devez vous connecter pour publier un commentaire.