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

A Jar of Clay · Accepted Answer · 2020-08-27 12:52:37Z

32

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, 2020 at 12:52

A Jar of Clay

6,3787 gold badges32 silver badges45 bronze badges

answered Aug 27, 2020 at 12:22

Tellisense

2,02415 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jayko03 Over a year ago

is it compatible with React 16.4?

TomiEcio Over a year ago

This is outdated, I think @Mohammad Reza 's answer is better

Madhan S · Accepted Answer · 2022-03-04 08:20:48Z

23

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 4, 2022 at 8:20

Madhan S

6931 gold badge6 silver badges17 bronze badges

answered Jan 4, 2022 at 9:46

Mohammad Reza

4535 silver badges11 bronze badges

Comments

Adnan · Accepted Answer · 2018-07-18 05:12:41Z

10

You can route by function by like this

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

Hope this help

edited Jul 18, 2018 at 5:12

answered Jul 18, 2018 at 3:36

Adnan

1,70713 silver badges19 bronze badges

2 Comments

Yashank Over a year ago

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? :)

Adnan Over a year ago

I think this should help

Abdullah · Accepted Answer · 2018-07-18 03:31:47Z

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, 2018 at 3:31

Abdullah

2,1212 gold badges22 silver badges30 bronze badges

5 Comments

Yashank Over a year ago

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..

Abdullah Over a year ago

hey @YashankVarshney you can use history.push stackoverflow.com/a/45263164/4089357 reacttraining.com/react-router/core/api/history

Yashank Over a year ago

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 :/

Abdullah Over a year ago

hmmm, not sure, can you try using exact in route i.e. <Route path="/" exact component={Login} />

Yashank Over a year ago

nvm, I think I just had to use the 'exact' path to get rid of the other component. Works fine now!

Ryan Gaudion · Accepted Answer · 2022-10-21 15:18:49Z

1

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

answered Oct 21, 2022 at 15:18

Ryan Gaudion

1,0771 gold badge13 silver badges32 bronze badges

Comments

Максим Подварков · Accepted Answer · 2018-07-18 07:53:11Z

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, 2018 at 7:53

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

11 bronze badge

1 Comment

Yashank Over a year ago

So should I just get rid of the <Switch> 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?

Bhargav Rao · Accepted Answer · 2019-07-31 14:25:40Z

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, 2019 at 14:25

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Jul 31, 2019 at 12:45

Zahid A.

12 bronze badges

Comments

Chetan Jain · Accepted Answer · 2021-05-13 06:05:32Z

0

Use an a tag

<a href="/" />

answered May 13, 2021 at 6:05

Chetan Jain

2511 gold badge6 silver badges18 bronze badges

Comments

Sandeep Rana · Accepted Answer · 2022-01-30 17:09:55Z

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, 2022 at 17:09

Sandeep Rana

3093 silver badges6 bronze badges

Collectives™ on Stack Overflow

React Routing Redirect onClick

9 Answers 9

2 Comments

Comments

2 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

2 Comments

5 Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related