OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to use react-router-dom's action and loader functions?

  • Thread starter Thread starter Lando-L
  • Start date Start date
L

Lando-L

Guest
I am trying to figure out how to use react-router-dom's action and loader functions to simulate "classical" routing. Let's say I have the routes /items and /items/{item_id} to view all items or a single item respectively. I understand with react-router-dom this is typically done using the route's loader function. Additionally, there is a form on the /items route to create a new item object. Here, I was thinking of using the route's action function to post the form-data and get a newly created item in return. Now, I am unsure what to do with the received data. The two solutions I came up with are unsatisfactory so I assume there has to be a better way for such a common scenario. Any help is appreciated!

Solution idea 1: Take the id of the newly created item and navigate to the /item/{id} route. This should work in practice, but requires an unnecessary request from the loader, since I already have the data I need.

Solution idea 2: Combine the router with redux and use the loader and action functions to update the application state. This seems overly complex and not in the spirit of the router, since I would skip the useLoaderData and useActionData hooks in favour of putting the data into redux's state management.

<p>I am trying to figure out how to use react-router-dom's <code>action</code> and <code>loader</code> functions to simulate "classical" routing. Let's say I have the routes <code>/items</code> and <code>/items/{item_id}</code> to view all items or a single item respectively. I understand with react-router-dom this is typically done using the route's <code>loader</code> function. Additionally, there is a form on the <code>/items</code> route to create a new item object. Here, I was thinking of using the route's <code>action</code> function to post the form-data and get a newly created item in return. Now, I am unsure what to do with the received data. The two solutions I came up with are unsatisfactory so I assume there has to be a better way for such a common scenario. Any help is appreciated!</p>
<p>Solution idea 1: Take the id of the newly created item and navigate to the <code>/item/{id}</code> route. This should work in practice, but requires an unnecessary request from the <code>loader</code>, since I already have the data I need.</p>
<p>Solution idea 2: Combine the router with redux and use the <code>loader</code> and <code>action</code> functions to update the application state. This seems overly complex and not in the spirit of the router, since I would skip the <code>useLoaderData</code> and <code>useActionData</code> hooks in favour of putting the data into redux's state management.</p>
 

Latest posts

M
Replies
0
Views
1
MOHAMED AMIIN ABDI AADAN
M
Top