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