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.
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
Latest comments (12)
Thank you! I am new to React and I was stuck on this problem for 5 days before I came across your simple and elegant solution
This was super helpful! Thanks
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.
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?
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.
what a simple solution for a learner, especially after spending a day for to find any possible samples. thanks.
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?
I will look into it!
Thanks for the post! It was exactly what I was looking for.
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 😀