CODEWITHSUNDEEP
javascriptreactjsreact-router
Rokas Ašmena
Rokas Ašmena

Reputation: 27

Route page to another with button (React)

I have a button on home page. When I click on it, I want to go to products page. Can't find solution to that... Part of code:

<Route path="/" exact component={Home}/>
<Route path="/products" component={Products}/>
...
<div>
    <h1>Home Page</h1>
    <button onClick={""}>Go!</button>
</div>

Upvotes: 1

Views: 130

Answers (1)

Himanshu Pandey
Himanshu Pandey

Reputation: 708

You can navigate using Link component in react in button

import {Link} from "react-router-dom";
import {Button} from 'reactstrap'

<div>
    <h1>Home Page</h1>
    <Link component={Button} to="/product"> Go! </Link>
</div>

or if you do not want to install extra module then this approach better

     import {Redirect} from "react-router-dom";

   const onClickProduct = () => {
        return  <Redirect  to="/product" />
      }

  const Home = () => (
    <div>
      <h1>Home Page </h1>
      <button onClick={this.onClickProduct}>Go</button>
    </div>

  )

Upvotes: 1

Related Questions