Permalink conflict with React Router in subfolder

Question

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'}>
      <Nav/>
        <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} />
        <Route exact path={`${process.env.PUBLIC_URL}/latest/`} component={Latest} />
  </BrowserRouter>

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?

Answer 1

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]
 </IfModule>

Also WP custom permalinks work as well.