Would you like to try React Router 7 with Strapi? That is exactly what we are going to do in this video.
Blog Post: https://strapi.link/react-router-7
GitHub: https://github.com/PaulBratslavsky/react-router-7-strapi-5-example
Welcome to the New Year! Hello, everyone! 🎉 Happy New Year to you and your families! I'm excited to kick off this year by diving into React Router 7, now officially released!
Why React Router 7?
React Router 7 combines Remix's best features with React's flexibility. Whether you're developing a library or a full-fledged framework, it is here to simplify your routing needs while providing server-side benefits.
What Will You Learn?
In this video, I'll walk you through:
- How to set up a Strapi backend.
- Integrating React Router 7 into your project.
- Fetching data from Strapi with React Router Loaders
Follow Along!
If you're eager to try it out, check out the guide here https://strapi.link/react-router-7 which includes step-by-step instructions and code snippets.
Key Takeaways:
- Understand React Router 7 Loaders and Routes
- Learn to set up a Strapi application and connect it with a React Router.
Gain insights into file-based routing conventions.
------------------------------------------------------------------------------------------------------------------------
Chapters
------------------------------------------------------------------------------------------------------------------------
00:00 React Router 7 is out, integrating Remix features and Strapi
02:21 Set up a Strapi project with TypeScript
03:37 Navigate to the content manager to select articles, publish them, adjust user permissions
04:47 Set up a React Router 7 project with file system-based routing
07:40 Update routes in TSX, rename home to index, create an about page
09:37 Install the qs library, define article data types, and create a loader function to fetch data f
11:12 Create an "article card" component
13:19 Easily create and publish a new blog post using React Router 7 and Strapi
Join the Conversation
Have questions? Join our Discord community for open office hours every Monday through Friday. We're here to help!
Thank you for watching, and once again, happy New Year!
------------------------------------------------------------------------------------------------------------------------
Migration Resources
------------------------------------------------------------------------------------------------------------------------
Migration Article: https://strapi.link/migration-blog-post
Migration Docs: https://docs.strapi.io/dev-docs/migration/v4-to-v5/step-by-step
Discord: https://discord.com/invite/strapi