React Routing Not wokring inside Wordpress - [WPengine]

Question

I've a Wordpress site hosted in WPEngine. I'm running a react application inside Wordpress using ReactPress plugin. https://####.wpengine.com/rpressapp/ - this is the slug where the production react app is running, I'm able to reach the root app that is app.js which has routes configured in it

• Login Route
• Signup Route

import logo from './logo.svg';
import './App.css';

import {
  BrowserRouter as Router,
  useRoutes,
} from "react-router-dom";
import Login from './components/Login';
import Signup from './components/Singup';

const AppRoutes = () => {
  let routes = useRoutes([
    { path: "/rpressapp/signup", element: <Signup /> },
    { path: "/rpressapp/login", element: <Login></Login> },
  ]);
  return routes;
};

function App() {
  return (
    <div className="App">
      Main React app
      <Router>
        <AppRoutes></AppRoutes>
      </Router>
    </div>
  );
}

export default App;

This is perfectly working if I spin-up local Wordpress server, but after moving it to WPEngine - wordpress is handling the routing making react not responding to it. So what happens is that I'm getting 404 page for the routes that are present in react.

Answer 1

I found answer to my question,

The issue is that WordPress is trying to do the routing before it reaches the react app. So as a result WordPress takes me to a 404 error page. So to disable this theme redirection, I've added the below action in the functions.php file of the current theme that is applied.

function redirect_prevent()
{
    add_action('redirect_canonical','__return_false');
}

add_action('template_redirect','redirect_prevent',1);

and just to double enforce this we can also add the below code in addition to the above one (add this below code in wp-config.php)

remove_action( 'template_redirect', 'maybe_redirect_404' );