甚至在 React（路由器）中发生时如何转到另一个域/路由答案

【问题标题】：How to go to another domain/route when even happening in React (Router)甚至在 React（路由器）中发生时如何转到另一个域/路由
【发布时间】：2020-02-22 21:35:09
【问题描述】：

如果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;

【问题讨论】：

标签： reactjs routing react-router

【解决方案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;

【讨论】：

【解决方案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;

【讨论】：