loading...
Cover image for Redirect with React Router and Hooks

Redirect with React Router and Hooks

httpjunkie profile image Eric Bishard Updated on ・2 min read

A lot of these short blog posts are just for me to find later when I forget how to do something, but I thought this little trick that you can do with React router was worth sharing.

To set the stage, I have an application with routing and pages already set up.

Imgur

One of the routes loads a Todo component in which I employ the useReducer hook in order to keep track of the todos state (local state). I have contrived a very simple feature that will redirect the user to the Home route once the Todos are cleared. Without thinking of all of the edge cases for this feature, I just want to get a basic redirect working using some basic logic, a quick and dirty example and we can iron the details out later if we want to.

If we look at the Todos.js file, we will see that we have a function that calls dispatch() and sends CLEAR_TODOS as an action type to our reducer.

In my contrived example, I know that I want to at the very least redirect to Home once the user clicks on "CLEAR TODOS", in a better example I would notify the user (which I am not doing in this code) and then redirect to Home because our todo list is cleared. So what I want to do here is tap into a Hook that I will create which has a state variable named toHome and a related set/update method called setToHome(). The code below is a standard useState hook:

In order to make the page redirect when the toHome state variable is set to true, we just need to render a regular Redirect component from React Router and we will use a ternary statement to inline that component if true and if not, we will use null or render nothing:

Here is a link to the specific commit that has this redirect setup: 4ed5c6

As well a link to the overall example application, which by the way has some other cool responsive stuff going on, check it out!

If you are new to Hooks and would like to read up on the subject, I have several articles that cover topics from Basic, Advanced and Custom Hooks as well as a talk on Hooks with links provided below if you are interested!

Articles on React Hooks:
How to Use Basic React Hooks for State and Effects
How to Use Basic React Hooks for Context
How to Use Basic React Hooks for Reducers
Everything You Need to Create a Custom React Hook

My Talk on React Hooks:
Getting Hooked on React

Discussion

pic
Editor guide
Collapse
dance2die profile image
Sung M. Kim

Cool stuff Eric 😮

I've created a Sandbox in case others want to try it out online.

Collapse
httpjunkie profile image
Eric Bishard Author

Perfect, thanks for doing that. I was planning on doing a few StackBlitz demos for some of the things I cover in this repo. But this will be helpful to those who want to run the code quickly. Thanks for taking the time!

Collapse
dance2die profile image
Sung M. Kim

You're welcome, Eric and thank you for the post.

The post was worth taking time setting up the sandbox 😀

Collapse
ucanerdem profile image
ucanerdem

what a simple solution for a learner, especially after spending a day for to find any possible samples. thanks.

Collapse
renansdf profile image
Renan Souza de Freitas

Wow thanks! That was exactly what i needed, but looks hackish though. To me React just doesen't make sense when you can't useHistory (a function) inside useCallback (another function). Is it just me? I'm new to this so i guess i'll figure out why in a while lol.

Collapse
grepliz profile image
Liz Lam

Thanks for the post! It was exactly what I was looking for.

Collapse
ogbanana profile image
ogbanana

This was super helpful! Thanks

Collapse
ankit199 profile image
Ankit kumar shukla

I have done same thing but when i hit path '/login' or '/signup' , it display url in browser tab('/account/login' || '/account/signup') but does not render related component.

Collapse
martin36 profile image
Martin36

Thanks for the great tutorial. Just a question though. If you try to navigate back to the previous page using your method, that won't work. Do you have any suggestion of how to implement that?

Collapse
httpjunkie profile image
Eric Bishard Author

I will look into it!

Collapse
antonyleme profile image
Antony Leme

When I want to redirect to admin/diary it works. But when I have admin/diary/:id it gives me a blank page. What could I do?