A Guide to Implement Dynamic Routing and Slugs in ReactJS and Strapi

Overview

Web app development has advanced, giving users more personalized and lively experiences. React, this well-liked JavaScript library for creating user interfaces, works great with Strapi, a handy open-source headless CMS, to offer a strong way to handle content and add dynamic features like routing and slugs. In this guide, we will explore on how to set up routing and slugs in a React app with Strapi as your backend. So, whether you’re making a blog, an e-commerce site, or any app that needs dynamic content, this tutorial covered you with the tools you need to manage and showcase your content easily.

Dynamic Routing and Slug

A slug is just a part of a URL that points to a specific page on a website, and it’s usually something that people can read easily, often coming from the page title. For instance, in the URL www.example.com/blog/how-to-code, “how-to-code” is the slug.

Dynamic routing and slugs are super important for websites that focus on content because they help with easy navigation and can boost SEO, which means the content becomes simpler to find and more interesting for users.

Step-by-Step Process

Step 1: Set Up Your Development Environment

Before you get going, ensure you have Node.js and npm installed on your computer. You’ll also want to have both React and Strapi projects created. If you haven’t, go ahead and make them with these commands:

1. Create React App:

2. Create Strapi App:

Step 2: Set Up Strapi for Managing Content

Define Content Types:

• Go to your Strapi admin panel (http://localhost:1337/admin) and create a new content type (like Articles).
• Include fields such as Title, Content, and Slug. Ensure the Slug field is unique for every entry since it’ll be used for dynamic routing.

Add Some Content:

• Put in a few sample data for your new content type so you can work with it.

Step 3: Setting Up API Endpoints

Strapi automatically generates RESTful API endpoints for your content types. You can customize these endpoints if needed, but you can access your content at routes like /articles for basic usage.

Step 4: Getting Data in React

1. Install Axios:

To fetch data from Strapi, install Axios in your React app:

2. Create a Service for API Calls:

In your React app, create a folder named services and add a file api.js to manage API calls:

Step 5: Do Dynamic Routing in React

Get React Router:

• React Router is key for managing routes in your React apps:

Set Routes Up:

• In your js (or wherever you handle routes), set up the routes for managing dynamic paths:

Make Components:

• HomePage Component: Get and show a list of articles along with links to their article pages.
• ArticlePage Component: Get and show the article details based on the slug in the URL.

HomePage.js:

ArticlePage.js:

Step 6: Test Your App

Make sure to run your Strapi and React apps to check if everything works.

• To start Strapi, use npm run develop while in the Strapi folder.
• To start React, type npm run dev in the React folder.

Then, head over to your React app in the browser and click on the article links to test the dynamic routing.

Benefits

• SEO Optimization: Slugs make URLs more user-friendly and descriptive, which helps boost search engine rankings.
• Scalability: You can easily add more types of content and routes without changing the current code.
• User Experience: It gives users a smooth navigation experience.
• Flexibility: Makes it simple to manage and update content with Strapi.

Conclusion

Using dynamic routing and slugs in your React app with Strapi as the backend, you’ve set up a flexible, scalable way to manage and show dynamic content. This setup helps with SEO and improves the user experience since it gives clean and easy-to-navigate URLs.

Drop a query if you have any questions regarding React app with Strapi and we will get back to you quickly.

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is the first Indian Company to win the prestigious Microsoft Partner 2024 Award and is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 650k+ professionals in 500+ cloud certifications and completed 300+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training Partner, AWS Migration Partner, AWS Data and Analytics Partner, AWS DevOps Competency Partner, AWS GenAI Competency Partner, Amazon QuickSight Service Delivery Partner, Amazon EKS Service Delivery Partner,  AWS Microsoft Workload Partners, Amazon EC2 Service Delivery Partner, Amazon ECS Service Delivery Partner, AWS Glue Service Delivery Partner, Amazon Redshift Service Delivery Partner, AWS Control Tower Service Delivery Partner, AWS WAF Service Delivery Partner, Amazon CloudFront and many more.

To get started, go through our Consultancy page and Managed Services Package, CloudThat’s offerings.