Redirect Management on Headless Wordpress w/ React Front End

[culturefoundry]

Hello everyone,

As Headless Wordpress becomes more and more popular, it becomes more complicated to manage and track 301 redirects. I'm reaching out for advice on this.

Our main issue right now, is that after migrating from Drupal to a Headless Wordpress/React platform we lost the ability to track, manage, and view traffic analytics for users hitting those redirects. This was something we were able to do in Drupal.

Example: If we have a redirect in place we could see how many times in the past x number of days that redirect was hit by users attempting to access the old URL.

Unfortunately, Yoast Premium, has been helpful with other SEO needs, but this is one that it is not able to manage.

Anyone have any ideas, experience, or thoughts on this issue?

Thanks for your time

[BlueprintMarketing]

PS  may I see your GitHub?

[BlueprintMarketing]

I love to see people using  Headless WordPress below five given free ways to do this a reverse proxy is a win-win however if you. want to do it with "react-router-dom"  for the WordPress settings in the first settings two URLs listed below you can't miss them.

I have always used Pantheon.io for headless or Pagely

One very simple and I believe personally saves you a lot of time method is to use a reverse proxy to do any redirects.

my personal recommendation Fastly.com if you want something a little bit more generic and not as fast or as developer-friendly you can  page rules ( redirects if you want to be) very inexpensively like five dollars a month for 30 on Cloudflare.com For tools like this which are very good no matter what code you are running https://www.easyredir.com/blog/how-to-redirect-a-url/

** I would still use Fastly ( they no longer charge for SSL certs)**

I of doneness with node.js I just have not done with react but what you're going to have to read through these two URLs and decide which end of it want to do the redirections from you can redirect from PHP you have to change your settings.php and your function.php file for the setup settings number two Install react-router to create routing for React. npm install react-router-dom

THE 2 URLs listed below

1. https://www.efficiencyofmovement.com/posts/redirect-headless-wordpress/
2. https://hybrit.org/blog/combine-headless-wordpress-with-a-react-spa-part-1

you're going. to have to WP changes to the settings.php as well as function.PHP

https://github.com/joshsmith01/headless-wp

• https://medium.com/moij/going-headless-with-wordpress-graphql-and-react-b939263a6f3d
• https://discourse.roots.io/t/detach-front-end-and-use-wp-headless/11419/2
• https://github.com/postlight/headless-wp-starter/issues/131

Install react-router to create routing for React. npm install react-router-dom

React Router allows us to create individual routes for our pages and adjust our URL. In order to dynamically create the routing, we can add the following code. Don't forget to import react-router-dom

Let's change the following code inside the render function to:

|   | // Import Router at the top of the page |
|   | import { |
|   | BrowserRouter as Router, |
|   | Link, |
|   | Route |
|   | } from "react-router-dom"; |
|   |   |
|   | render() { |
|   | const { pages } = this.state; |
|   |   |
|   | return ( |
|   | |
|   | <fragment></fragment> |
|   | {/* Links /} |
|   | |
|   | {pages.map((page, index) => { |
|   | return {page.slug}; |
|   | })} |
|   | |
|   |   |
|   | {/ Routing */} |
|   | {pages.map((page, index) => { |
|   | return ( |
|   | |
|   | exact |
|   | key={index} |
|   | path={/${page.slug}} |
|   | render={props => ( |
|   | <examplepage {...props}="" page="{page}"></examplepage> |
|   | )} |
|   | /> |
|   | ); |
|   | })} |
|   | |
|   | |
|   | ); |
|   | } |

view rawApp.js hosted with by GitHub

Create a folder inside the src folder called components and add ExamplePage.js to it. Inside ExamplePage.js we will add the following code

|   | import React from 'react' |
|   |   |
|   | export default function ExamplePage(props) { |
|   | const { page } = props; |
|   | return ( |
|   | |
|   |

{page.title.rendered}

|
|   | |
|   | |
|   | ) |
|   | } |

view rawExamplePage.js hosted with by GitHub I hope this is been some help to please let me know if you run into any obstacles  I like that you are doing headless Pantheon is. a great resource for this as well. Let me know if you run into any obstacles or if I can be of more help. all best,Tom