即使在 React（路由器）中发生，如何转到另一个 domain/route

Question

如果 Home 组件包含一个按钮，我希望它在单击时会转到另一个路由（域）怎么办？例如 - 选择组件？我该怎么做？

主要成分：

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

但是，如果没有其他逻辑，我建议您使用 react-router 中的 <Link> 进行链接，例如：

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;

即使在 React（路由器）中发生，如何转到另一个 domain/route

How to go to another domain/route when even happening in React (Router)

reactjs

routing

react-router