React routing in wordpress

Question

I'm building a react SPA with Wordpress running as the backend, but it's not headless, so the entire frontend is included in the theme. I simply run npm build and enqueue the production files in the functions.php file. The application is rendered into a <div id="root"></div> inside a template file. My wordpress install is set to have a static homepage, which uses the template that contains the React root div.

This seems to work just fine, apart from the Router. If I go to a different address, say https://mywebsite/about, it tries to load a wordpress page named about, rather than staying on the same page, and using the router to render the appropriate component. Is there something setting I have to change in the .htaccess file? Or is there something else I am missing?

Do normal links in your SPA work fine? Is it just direct access to URL's that result in 404? — Ian Loubser
– Ian Loubser, Commented Mar 21, 2019 at 22:44
I should have mentioned that. The links work fine (it changes the URL and renders the correct component). It only breaks when I enter a URL manually. — Rob Teeuwen
– Rob Teeuwen, Commented Mar 21, 2019 at 22:51
It is still headless if you are using react only for the theme, and pulling data from WP Api. Headless doesn't imply that you cannot use it as a WP theme. — Vlatko Vlahek
– Vlatko Vlahek, Commented Mar 22, 2019 at 0:47
As far as I know, a headless website is one in which backend and frontend are completely independent. In this case, the frontend is embedded within backend, it is not stand alone. Some of the displayed data is pulled from the REST API, but some is rendered by php on first page load. — Rob Teeuwen
– Rob Teeuwen, Commented Mar 22, 2019 at 9:52

Mikko Koskela · Accepted Answer · 2019-05-16 06:17:07Z

16

If you have a React app on your WP page and you don't want to edit .htaccess you can also add rewrite rules with add_rewrite_rule() in functions.php to redirect all requests to your react app WP page to be handled by React Router.

add_action('init', 'wp55290310_rewrite_rules');

function wp55290310_rewrite_rules() {
    add_rewrite_rule('^your-react-app-root/(.+)?', 'index.php?pagename=your-react-page-name', 'top');
}

You need to specify the baseName in React Router:

<BrowserRouter basename="/your-react-app-root">
  <Switch>
      <Route exact path="/" component={SomeComponent} />
      <Route exact path="/other-page" component={OtherComponent} />
  </Switch>
</BrowserRouter>

answered May 16, 2019 at 6:17

Mikko Koskela

1616 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NaN140114 Over a year ago

also, it's needed a flush of WordPress permalinks. Just enter to Setting >> Permalinks and save changes. It will flush your "permalinks cache".

Darren Cooney Over a year ago

The add_rewrite_rule works, thanks. I didn't need to set a basename, just works with React Router 5.1.2

CraZyDroiD Over a year ago

What should i include for 'your-react-page-name'

Mikko Koskela Over a year ago

@CraZyDroiD 'your-react-page-name' should be the slug of the page you are redirecing to (eg, yoursite.com/testpage/ -> testpage).

Vlatko Vlahek · Accepted Answer · 2019-03-22 00:36:56Z

2

Yes, the answer lies inside the .htaccess file.

You need to set up a catchall rule, which will serve index.php file for all routes instead of trying to find a matching php file for the route which is happening now.

You should be able to use this config to achieve such behaviour:

# BEGIN WordPress

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

Solution does imply you are using modrewrite on your server.

answered Mar 22, 2019 at 0:36

Vlatko Vlahek

1,88915 silver badges21 bronze badges

3 Comments

Rob Teeuwen Over a year ago

This worked indeed, but I found out that in addition I needed to turn off permalinks (via dashboard -> settings -> permalinks -> set to 'plain'). Prior to this, when all traffic was being routed to index.php, the wordpress router was catching this traffic before the react router.

Vlatko Vlahek Over a year ago

Strange, I'm using custom Post Name or Custom Structure permalinks with this config without issues

Santiago Mendoza Ramirez Over a year ago

With this approach I am getting a 404 error in console (altought react handle the routes well). Is there a way to make wordpress response a 200 instead of 404?

Collectives™ on Stack Overflow

React routing in wordpress

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related