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
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.
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' );