In the last two articles we have shown how to get the articles, display them and also use the React Router for pagination. In this tutorial we will now see how to show a single article using the React Router in out Headless WodPress application.

How are we going to do this?

  1. We will get the Slug from the Route
  2. Check if there is an article with that slug
  3. If not, fetch a new one
  4. If we still don’t have an article, show 404 Page Not Found
  5. If found, show the article

Since we will always try to fetch a new article if we don’t have such slug, we will store not found slugs in state so we don’t end up in an infinite loop.

Open the App.js and add the new React hook notFoundSlugs:

Fetching Articles by Slug

We need a method to fetch new articles by slug, so let’s create a method for that. Add this method inside of the App function.

If we find an article, we will merge that data with other articles so we can find it next time. If not, we will store that slug in our state to notFoundSlugs.

Showing Article by Slug

Let’s now create a method to get an article by the provided slug. This will be a component that we will set for our Route.

We get the id which will be our slug form the React Router params and then we are trying to find if we have one. If we don’t find one and if there are no such slugs inside of our state for notFoundSlugs, then we try to fetch one.

After that, we move the article object into the Article component.

Not Found Page Component

This is a simple component that will display that there are no data for that URL.

The Article Component

In the last tutorial, we have created a dummy component just to hold some data. Now, we will update that component that will show the NotFoundPage component or the article information.

Updating the Single Article Route

We will now have to replace the <Article /> component inside of the single route with our new method to find an article by slug GetArticleBySlug.

This is the route:

<Route path="/:id">
  <GetArticleBySlug />
</Route>

Code Example

Here is the whole code example combined together. Once you unzip it, make sure to run npm install inside of that folder to install everything you need it to run.

This part is available only to the members. If you want to become a member and support my work go to this link and subscribe: Become a Member

Conclusion

With a few more components, you can define the whole app to display single articles or 404 pages. Using the React Router and state, it is even easier to display such data.

How have you handled 404 and single pages with React?

Become a Sponsor

Posted by Igor Benic

Web Developer who mainly uses WordPress for projects. Working on various project through Codeable & Toptal. Author of several ebooks at https://leanpub.com/u/igorbenic.

4 Comments

  1. Thanks – I gave up trying to go headless! this helps a lot

    Reply

  2. Hey Igor, my name is JuanMa and I’m the Lead Developers Relations at Frontity. I went through your post series on headless WordPress and they are great! I read that you were planning to make some tutorials about Frontity as well, and I just came up with the idea of creating a proof of concept to “how Frontity can simplify the development of a project using Headless WordPress + React “.

    https://github.com/frontity-juanmaguitar/ibenic-headless-wordpress-demo

    It would be great if you could check it out and let me know your thoughts if you think this can be helpful.

    Reply

    1. Hi JuanMa, the guide you’ve put in there is really helpful and thank you very much for using my tutorials for comparison!

      That was kind of an idea of mine as well, to first build something without it and then try to develop that using Frontity.

      Reply

  3. That’s great Igor!

    When you start building something with Frontity or writing about it, let me know if you need any help

    You can reach me out on our community forum (https://community.frontity.org/) where you can directly mention my user @juanma

    Can’t wait to see what you build with Frontity!

    Reply

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.