React Routing Redirect onClick

Question

Ive been trying to do a simple redirect to another component on button click, but for some reason it doesnt work.I want to redirect to '/dashboard' and display AdminServices from login as follows:

//index.js

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, 
    document.getElementById("root"));

//App.js

     <Switch>
          <Route path="/" component={Login} />
          <Route path="/dashboard" component={AdminServices} />
        </Switch>

//Login.js

<Button
onClick={this.login}
>
</Button>

login = () =>{
    <Redirect to="/dashboard" />
  }

//AdminServices.js

render(){
        return(
            <div>Test</div>
        );
    }

score 31 · Accepted Answer · edited Aug 27 '20 at 12:52

31

Instead of using the props.history, a better way is using the useHistory hook like below:

import { useHistory } from 'react-router-dom'

const MyComponent = (props) => {
  const history = useHistory();

  handleOnSubmit = () => {
    history.push(`/dashboard`);
  };
};

edited Aug 27 '20 at 12:52

A Jar of Clay

5,622
6
25
39

answered Aug 27 '20 at 12:22

Tellisense

1,858
12
11

1

is it compatible with React 16.4? – jayko03 Jul 09 '21 at 03:57
1

This is outdated, I think @Mohammad Reza 's answer is better – TomiEcio Nov 28 '22 at 19:55

score 17 · Answer 2 · edited Mar 04 '22 at 08:20

17

In react-router-dom v6 you can use useNavigate(), as answered here.

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

const navigate = useNavigate();
navigate('/dashboard');

if you're still using previous versions, you can use useHistory, as Tellisense mentioned.

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

const navigate = useHistory();
navigate.push('/dashboard');

edited Mar 04 '22 at 08:20

Madhan S

683
1
5
16

answered Jan 04 '22 at 09:46

Mohammad Reza

361
3
10

Adnan · Answer 3 · 2018-07-18T05:12:41.120

9

You can route by function by like this

  handleOnSubmit = () => {
  this.props.history.push(`/dashboard`);
  };

Hope this help

edited Jul 18 '18 at 05:12

answered Jul 18 '18 at 03:36

Adnan

1,589
11
17

Tried already but it still wouldnt show my other component. Also Link gives it a weird underline which ill have to deal with later. How can I just use a function to redirect? :) – Yashank Jul 18 '18 at 03:50
2

I think this should help – Adnan Jul 18 '18 at 05:13

score 1 · Answer 4 · answered Jul 18 '18 at 03:31

1

Simple, use NavLink instead of button

import { NavLink } from 'react-router-dom'

<NavLink to="/dashboard"> Dashboard </NavLink>

https://reacttraining.com/react-router/web/api/NavLink

answered Jul 18 '18 at 03:31

Abdullah

2,015
2
20
29

2

I specifically want to use button as Im using material design and its inside a card. It'll be ideal to use a button in this case.. – Yashank Jul 18 '18 at 03:49
hey @YashankVarshney you can use `history.push` https://stackoverflow.com/a/45263164/4089357 https://reacttraining.com/react-router/core/api/history – Abdullah Jul 18 '18 at 03:53
Sure, I read online that redirecting or linking is a preferred choice than push? Anyways I did try putting NavLink and now it does take me to the right url but for some reason it still shows the same component and not the other one :/ – Yashank Jul 18 '18 at 03:58
hmmm, not sure, can you try using `exact` in route i.e. `` – Abdullah Jul 18 '18 at 04:03
nvm, I think I just had to use the 'exact' path to get rid of the other component. Works fine now! – Yashank Jul 18 '18 at 04:03

score 1 · Answer 5 · answered Oct 21 '22 at 15:18

With react-router-dom v6 you will need to use useNavigate instead of useHistory:

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

export default function MyComponent(){
  const navigate = useNavigate();

  handleOnClick = () => {
    navigate("/dashboard");
  };
};

score 0 · Answer 6 · answered Jul 18 '18 at 07:53

0

<Switch> component render only the first route that matches. You just need to swap your <Route> components in <Switch> case and use @Adnan shah answer to make redirect function.

P.S react router auth example

answered Jul 18 '18 at 07:53

Максим Подварков

1
1

So should I just get rid of the at all? You were right about it routing only to the first component.. Now that Im trying to go from '/dashbaord' to '/addservice', it doesnt work :/ Do I remove it completely? – Yashank Jul 18 '18 at 19:44

score 0 · Answer 7 · edited Jul 31 '19 at 14:25

0

This happened to me once I had missed importing the component to the route.js file.

You need to reference/import files from the component to the routefile.

edited Jul 31 '19 at 14:25

Bhargav Rao

50,140
28
121
140

answered Jul 31 '19 at 12:45

Zahid A.

1
2

score 0 · Answer 8 · answered May 13 '21 at 06:05

0

Use an a tag

<a href="/" />

answered May 13 '21 at 06:05

Chetan Jain

236
6
16

score 0 · Answer 9 · answered Jan 30 '22 at 17:09

0

Maybe this might help

import { useHistory } from "react-router-dom";
const history = useHistory();
<Button
onClick={this.login}
>
</Button>

login = () =>{
     history.push("/about");
  }

answered Jan 30 '22 at 17:09

Sandeep Rana

179
2
6

React Routing Redirect onClick

9 Answers9

Linked