WordPress Development Asked by mediaguru on December 29, 2021
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?
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.
Answered by mediaguru on December 29, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP