Dynamic URLs on a ReactJS App same like wordpress Using Rest API - Wordpress

1
votes

My wordpress website is as follows

  • pages and posts are simply /slug-of-page or /slug-post
  • categories /category/category-slug
  • tags /tag/tag-slug

I got a prototype react JS app that uses the WP REST API, is it possible to match this URL mapping within react App so that I don't lose the SEO that we have on those pages. I have hundreds of tags and cats.

I am a novice ReactJS/Web Developer. I am thinking of moving the wordpress site to a sub-domain, then serve the reactJS App on the main domain.

Regards, will appreaciate any help.

1
wordpressreactjsrestapi

1 Answers

1
votes

Yes you can possibly match this URL mapping by using the match object.

This is my example for Mapping the URL of Posts WP Rest API Route. Posts Route: 'https://youu-wp-site-here.com/wp-json/wp/v2/posts'

I am assuming you have the WP Rest API data from your wp site POSTS route and the posts Data you already mapped inside your React app..

In my Post Page I have these 2 routes:

<Route path={`${match.path}`} render={(props) => render={( invoke the component here ) => ()} />
<Route path={`${match.path}/:topicId`} render={() => ( invoke the component here )} />

And this in render Component within your Route to navigate into Single Post. 

<Link 
 className='btn btn-outline-success' 
 role='button' 
 to={`${match.url}/${post.title.rendered.replace(/\s+/g, '-').toLowerCase()}`} 
>Read more &rarr;</Link>

This is the github repo for this -> https://github.com/jun20/React-JS-and-WP-Rest-API/tree/posts-api-and-blog-layout-FINAL