How do i redirect to a page from button click in react from a component?

Question

this is my app.js

<div
  className="flex-one main-content-box"
  style={{ height: "calc(100% - 55px)" }}
>
  <div className="arrow-navigation" style={{ top: topPosition }}></div>
  <Switch>
    <Route path="/" exact render={() => <DashBoard store={main} />} />
    <Route path="/newprocess" render={() => <div>DEFG</div>} />
    <Route path="/release" render={() => <div>ABCD</div>} />
  </Switch>
</div>

this is my process.jsx

<div className="saveblue mg-r-10" onClick={this.handleNewProcess} style={{cursor: "default"}}><i className="fas fa-plus pd-r-5" />New Process</div>

this the function

 handleNewProcess = () => {
        //HOW DO I REDIRECT THE CLICK FROM HERE TO "/newprocess" page 
    }

Does this answer your question? [programmatically-navigate-using-react-router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — nart, Mar 07 '22 at 07:43

The scion · Answer 1 · 2022-03-07T10:11:58.000

1

You can use useNavigate().

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

    const MyCompo= () => {
    
      let navigate = useNavigate();
      handleNewProcess = () => {
         navigate(`/newprocess/`);
        //HOW DO I REDIRECT THE CLICK FROM HERE TO "/newprocess" page 
    }

And as nos nart mentioned, this solution is fit only from react-router v6.

edited Mar 07 '22 at 10:11

answered Mar 07 '22 at 07:43

The scion

1,001
9
19

See the render props on Route comp. OP use react-router-dom v5 not v6 – nart Mar 07 '22 at 07:46
Hi @nosnart, can you please explain what do you mean? you mean useNavigation is working only on version 5? – The scion Mar 07 '22 at 07:51
1

v5 doesn't have `useNavigate` hooks – nart Mar 07 '22 at 07:52
i have used useHistory but its not working do i have to render anything ? – Abhishek Roy Mar 07 '22 at 08:21
UseHistory is deprecated see the link https://github.com/frontarm/navi/issues/137 – The scion Mar 07 '22 at 10:10

score 0 · Answer 2 · answered Mar 07 '22 at 08:01

You can also solve this issue using useHistory hook

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

    const MyCompo= () => {
    
      let history = useHistory();
      handleNewProcess = () => {
         history.push('/newprocess/');
        //HOW DO I REDIRECT THE CLICK FROM HERE TO "/newprocess" page 
    }

checkout this page , it has mentioned all the methods of redirection in react: Link

How do i redirect to a page from button click in react from a component?

2 Answers2