How to redirect to another component on a button click?

Question

How to redirect a component based on a selected drop down value and button click in react using react router dom ?

I have tried using Redirect tag but i am unable to redirect to another component

Using history, here is a detailed answer with react router v4: https://stackoverflow.com/a/45849608/11135550 — Voltis, Apr 10 '19 at 09:34
Please suggest an example using React router dom v4 using Redirect tag — Koushik Kintali, Apr 10 '19 at 09:54

score 2 · Answer 1 · answered Apr 10 '19 at 09:38

2

Link component from react-router can be used for this:

<Link to="/other-components-url">
    <button>Click Me!</button>
</Link>

Any UI element can be nested in "Link" component which when clicked will redirect to specified URL/Component.

For more details visit: https://knowbody.github.io/react-router-docs/api/Link.html

answered Apr 10 '19 at 09:38

Karishma Kate

21
3

Just the solution I was looking for. Thanks! – Yash Gupta Feb 03 '22 at 17:22

score 0 · Answer 2 · answered Apr 10 '19 at 09:11

0

You need to use props inside your onchange function to go to another page.

this.props.history.push('/my-other-components-url');

answered Apr 10 '19 at 09:11

Ertan Hasani

1,675
12
27

But where and how is this history declared and passed? – dfrankow Oct 28 '21 at 20:06
@dfrankow you can use `withRouter` and access `history` prop. Here's the documentation from their official website https://reactrouter.com/web/api/withRouter – Ertan Hasani Nov 01 '21 at 12:02

score 0 · Answer 3 · answered Nov 09 '20 at 07:49

import React from 'react'
import Button from 'react-bootstrap/Button'
import { Link } from "react-router-dom"; 
import { useParams } from "react-router"; 
export const Parent component ()=>{

return(
  <Link to={"/child" + 12 + " "} >
  <Button className="btn btn-icon btn-round  " >  Redirect   </Button>
    </Link>
)
}

 
 
export const Child component ()=>{
 
 let { id} = useParams();
return(
  <div>hello danish your id is : {id}</div>
)
}

How to redirect to another component on a button click?

3 Answers3