CODEWITHSUNDEEP
reactjsroutesreact-router
Yopi
Yopi

Reputation: 59

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

What if the Home component includes a button, and I want that when it click on, it will go to another Route (domain). For example - choose component? How can I do that ?

The main component:

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

Home component:

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;

Upvotes: 0

Views: 258

Answers (2)

oemera
oemera

Reputation: 3443

You can use this.props.history.push() to switch routes programmatically, in your case:

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

However, I would recommend you using <Link> from react-router for linking, if there is no other logic, like so:

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;

Upvotes: 1

Arturo Israel Navarro
Arturo Israel Navarro

Reputation: 1

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;

Upvotes: 0

Related Questions