![]() I have contrived a very simple feature that will redirect the user to the Home route once the Todos are cleared. 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). To set the stage, I have an application with routing and pages already set up. ![]() See the example below for reference.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. If you have a requirement of opening a new tab on clicking the React Router Dom Link, then just use target attribute and specify _blank. Here is a simple example on how to disable a React Router Dom Link. If you want to disable a Link in React Router, then use the CSS pointer-events attribute. If you want to directly apply a style when Link’s route is active, then use the activeStyle property. As the name specifies, this class is applied when Link’s route is active. You can specify activeClassName property. There are two properties through which you can style your React router dom Link. * call this if you want to prevent default behavior, that is transition to fire */ Below is a simple React Router Dom Link onClick example. You can just put your function on the onClick attribute. There are use cases where you want to do something specific when a user clicks on React Router Dom Link. I would recommend you use the string option instead of object option while specifying to attribute of React Router Dom Link. ![]() Please note that search, hash and state properties are deprecated now and could be removed in future releases. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2022
Categories |