Velotio React Templates - React Router Data Loading

• This example uses Vite.js as a scaffolding and bundling tool and use Node Version Manager (nvm) to maintain runtime compatibility
• You can view the end demo here

Stack

• React Router V6
• TailwindCSS
• Vite.js

Some stuff to pay attention to

• This example is to demonstrate how to use the data loading capabilities of the new React Router V6
• React Router V6 onwards a slight directory based routing is followed which means routes must be defined inside src/routes/root.tsx file
• This example is what we think would be the best way to implement a quick data loading setup - feel free to clone and create PRs for refactoring
• The example also has an implementation of how to add auth protected routes with a dummy auth provider
• You can preview the production build of the app using yarn preview (just to see how crazy fast Vite builds are)

Contributions

• Feel free to raise pull requests, review them, etc. if you feel you can make the repo better
• Merging them will only be done after a common consensus

Steps to run

1. Clone the repo
2. Create a .env.local file and paste the contents as below these steps
3. nvm use
4. yarn
5. yarn dev

.env.local file

VITE_API_URL=https://pokeapi.co/api/v2