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>
        );

Jak propagovat custom properites do komponenty v případě použití react-router

Namísto původní route, která používá compoent atribut
 <Route path="/" compoent={Home} />

použít atribut render a předat custom properties k původním, které používá vlastní Router:

<Route path="/" render={props => <Home runSection={actions.runSectionCall} getUnitStatus={actions.getUnitStatusCall} {...props} />} />

Kde nastavit komponmentu z výsledku REST volání v React?

Ideální pro provolání REST API a nastavení stavu komponenty podle výsledku volání je hook (nebo jinak Lifecycle method) metoda componentDidMount. V době, kdy React framework zavolá tuto metodu je již připravený DOM a existuje také state, do kterého zaznamenáme výsledek REST volání.