Как go к другому домену / маршруту, даже если это происходит в React (Router)

Question

Что, если компонент Home содержит кнопку, и я хочу, чтобы при нажатии на нее go перешел на другой маршрут (домен). Например - выбрать компонент? Как я могу это сделать?

Основной компонент:

function App() {
  return (
    <Router> {/*Everything inside this will be capble to routing*/}
    <div className="App">
    <h1>CarLeas</h1>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Route path="/choose" component={Choose}/>
      <Route path="/whochoose" component={Whochoose}/>
      <Route path="/reback" component={Reback}/>
    </Switch>

    </div>
    </Router>
  );
}

Домашний компонент:

import React from "react";

class Home extends React.Component {
    render() {
        return (
        <div>
            <img src="https://www.trustford.co.uk/img/campaigns/all-new-ford-focus/2018-08-22/all-new-focus-banner-2000x500.jpg"></img>
            <p>Rent a Car</p>
            <button>Start Now</button> {/*Button - If event onclick happend show the "choose" component*/}
        </div>
        )
    }

}

export default Home;

Answer 1

Вы можете использовать this.props.history.push() для программного переключения маршрутов, в вашем случае:

this.props.history.push("/choose");

Однако я бы порекомендовал вам использовать <Link> из react-router для связи, если нет других логи c, например:

import React from "react";
import {Link} from "react-router";

class Home extends React.Component {
    render() {
        return (
        <div>
            <img src="https://www.trustford.co.uk/img/campaigns/all-new-ford-focus/2018-08-22/all-new-focus-banner-2000x500.jpg"></img>
            <p>Rent a Car</p>
            <Link to="/choose">Start Now</Link> 
        </div>
        )
    }

}
export default Home;

Answer 2

import React from "react";

class Home extends React.Component {
    render() {
        const { history } = this.props;
        return (
        <div>
            <img src="https://www.trustford.co.uk/img/campaigns/all-new-ford-focus/2018-08-22/all-new-focus-banner-2000x500.jpg"></img>
            <p>Rent a Car</p>
            <button onClick={()=> history.push('/choose') }>Start Now</button>}
        </div>
        )
    }

}

export default Home;