I have a Wordpress install on the root of my apache server. I've built a photo gallery in React which is in the subdirectory /gallery. The gallery home page load properly. If I try to go to any other URL's in the React app however, Wordpress's rewrite settings take over.

For instance, there's a React route for the latest images, which is at /latest. So it would be www.site.com/gallery/latest.

Wordpress takes over that URL and is showing a blog post with the word "latest" in the title.

Here's my Router:

  <BrowserRouter basename={'/gallery'}>
        <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} />
        <Route exact path={`${process.env.PUBLIC_URL}/latest/`} component={Latest} />

I've tried changing WP's permalinks to plain, and that results in a 404 page for the React routes.

Is it possible for React and WP to play nicely together with regards to this routing issue?


I managed to get it working by placing the following in an .htaccess file in my React app folder:

 <IfModule mod_rewrite.c>
     RewriteEngine on
     # Don’t rewrite files or directories
     RewriteCond %{REQUEST_FILENAME} -f [OR]
     RewriteCond %{REQUEST_FILENAME} -d
     RewriteRule ^ – [L]
     # Rewrite everything else to index.html to allow html5 state links
     RewriteRule ^ index.html [L]

Also WP custom permalinks work as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.