Conflict with React Router in subfolder

  • TKServer

    (@tkserver)


    6 years, 8 months ago

    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 http://www.site.com/gallery/latest.

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

    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?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    6 years, 8 months ago

    You would need to move WP out of root. Lets say it is moved to /wp/. Then WP will not take over any requests unless /wp/ is in the path. /gallery/latest/ would not affect such a WP at all. WP would not even be aware of the request.

    The only way for WP to happily cohabitate in root with react-router is if you use plain permalinks.

    Thread Starter TKServer

    (@tkserver)

    6 years, 8 months ago

    Thanks for the response @bcworkz

    The blog is 15 years old with roughly 5K posts. I would hate to have to move the entire URL structure to something different because that would break tens of thousands of incoming links.

    For fun I just tried plain permalinks. If I do that, the react paths other than /gallery don’t work, such as /gallery/latest/ 404’s.

    Bummer.

    Thread Starter TKServer

    (@tkserver)

    6 years, 8 months ago

    WOA! I think I’ve got it. I’m able to get react router routes working with the following .htaccess code in the location /gallery/.htaccess

    <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>

    Turned WP’s permalinks back on to day and name and all still seems to work.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Conflict with React Router in subfolder’ is closed to new replies.