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

Posted on Jan 22 '19 by:

httpjunkie profile

Eric Bishard

@httpjunkie

Senior Developer Advocate for @Couchbase (NodeJS SDK) in the San Francisco Bay Area.

Discussion

markdown guide
 

Cool stuff Eric 😮

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

 

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!

 

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

The post was worth taking time setting up the sandbox 😀

 

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

 

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

 

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.

 

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?

 

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?