nested routes issue

[HarleySalas]

When using create-react-wptheme, nested routes for example "/blog/test-post-slug", upon page reload removes the route prefix of "/blog" and simply goes to "/test-post-slug", responding with my 404 error page. I duplicated my code over to a normal create-react-app, with the same exact routing and this issue is not present. I believe it may be due to a misconfigured webpack setting?

[devloco]

It's certainly possible... but my first guess is that you're not taking the theme path into account in your routes.

You have to do a bit more to use React-Router in a WordPress theme since the react enabled theme runs from a deeper folder. For example, here's a screenshot showing the "Network" tab in Firefox.

First thing to note are the items in green. As you can see the highlighted JS file has a much deeper path into the site's URL (i.e. /wp-content/themes/foo/static/js/main.545a5688.chunk.js).

And since the theme is running fully client-side you need to provide more information for it to work properly.

Muhammad Muhsin wrote up a great tutorial for using React as a WordPress theme, including using Reac-Router: How To Build A Skin For Your Web App With React And WordPress

He does not use create-react-wptheme as it didn't exist back then (that tutorial was what inspired me to write create-react-wptheme). So you can skip all of the manual Webpack setup that he does at the beginning of the tutorial and get right into the editing of the PHP and JS files.

Here are the important parts of his code for routing: Using Functions.php to create a global client-side JS variable with the correct paths NOTE: Put your Functions.php file in the react-src/public folder in your theme that was created using create-react-wptheme.

And then here is his routes code. celestial/src/index.js

[devloco]

I forgot talk about the RED items in the screenshot above. I think that Muhammad is using a hard-coded name for the file that Webpack outputs. And that can cause browser caching issues. So create-react-wptheme has a newly named file each time Webpack runs a build.

You can see that the files outlined in red above all have some random numbers and letters in them. I think that's going to be a problem for the value that Functions.php will output. And it might be a lot easier for me to fix it rather than coming up with a complex work around.

I'll look at it tomorrow and add the ability to not add those random strings. But you'll have to remember that you'll need to check the "disable cache" feature (seen just to the right of the big green down arrow above).

And if you're interested, the caching issue was a big deal. You can see the original issue about it here. It's a long one, so might be better to start at the bottom and read up. :-)

[devloco]

I published a new release that uses URL caching (as opposed to file name caching).

This ensures all JavaScript files will named the same and be at the same location during both DEV and PROD.

So no matter what routing method you prefer to use, create-react-wptheme shouldn't be getting in the way. But you will still need to determine which routing strategy is best for your theme.

And you'll still need to understand that a React WordPress theme is going to require some extra steps to get the routing working, since the theme is several folders down from the main site's URL.