#React router - prevent caching during development?

3 messages · Page 1 of 1 (latest)

icy kestrel
#

I'm just starting to use react router. Following the tutorial in the docs and building a personal project. I'm running into a problem with what appears to be caching. Docs tutorial: https://reactrouter.com/en/main/start/tutorial#the-contact-route-ui

Once I started using the <Outlet /> component to render child route elements, I noticed that changes I make to the child route components only show up if I shut down the development server, clear my browser cache, and restart to the dev server. This is massively time consuming; surely there is a better work flow?

I am just trying to build a simple app that has a bottom navigation that renders content in the middle of the page based on what nav link is clicked. Github repo here: https://github.com/josephrmartinez/reactionsjournal

With this project I am trying to use vite, react router, and tailwind.

Site here:
https://josephrmartinez.github.io/reactionsjournal/concepts

Is there any way for me to disable this caching behavior during development?

GitHub

Contribute to josephrmartinez/reactionsjournal development by creating an account on GitHub.

#

If you look at the site now, you will see the styling needs work. My next step is to implement the design for the grid of words using tailwind. But once I make the updates in the component file and press save, nothing happens. I usually expect the changes to show immediately, but since I've started using React router and rendering a child component via <Outlet />, I now have to shut down the dev server and clear the browser cache to see updates. This is really time consuming. Is there a better workflow?

I've tried going into Chrome setting and clicking "disable cache while dev tools is open". This does not seem to have made any difference. Perhaps caching is not exactly what is going on here?

crystal folio
#

This may not be the problem you're having, but when I run your project on my machine, I needed to remove the base option from the vite config in order to get it to work. Then the route didn't include reactionsjournal, but everything else is working 100% as expected. Made a change to a child route (e.g. Logs) and it immediately updated