pondělí 9. dubna 2018

Jak provést redirect v Butotn onClick handleru

React router posílá do komponenty property history, kterou lze použít pro provedení přesměrování na další stránku.

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import {withRouter} from 'react-router-dom';


class Home extends Component {

    doRedirect = () => {
        this.props.history.push('/next_page');    }


    render() {
         return (
                          <Button onClick={this.doRedirect} >
                            Klikni pro přesměrování
                          </Button>
        );
    }
}

export default Home;

pokud je potřeba do handleru poslat i nějaká data, lze takto:

    doRedirect = (id) => {
        this.props.history.push('/next_page/'+id);    }



    render() {
         return (
                          <Button onClick={(e) => this.doRedirect("12345",e)} >
                            Klikni pro přesměrování
                          </Button>
        );

nebo zjednodušeně:

    render() {
         return (
                          <Button onClick={() => this.doRedirect("12345")} >
                            Klikni pro přesměrování
                          </Button>
        );



Žádné komentáře:

Okomentovat