Issue with React - Router clean urls 404'ing

[wlaurance]

Hello,

I believe this used to work but when I do a hard refresh on a URL that should be a react-router handled URL it will 404.

I setup my app / wordpress locally and it worked for a bit, then I toggled the checkbox

and added a new page, removed the new page, and checked the box again to recreate. So somehow I'm able to get it into a state where the full clean urls do not use the target page.

Any ideas? thanks

[rockiger]

I have to investigate this. Client-site-routing with clean URLs is tricky because we have to tell WordPress that it should ignore the path. I don't know what WordPress is doing internally.

My first advice would be to use <HashRouter> if you can. It will add a # into your URL, everything else stays the same.

[sbettwieser]

My team is also having this issue with Clean URLs and <BrowserRouter>.

[rockiger]

I will test this during easter.

[jegenhoff]

We were experiencing this issue with version 3.1.0.

Our app was originally published using version 2.1.3, and the issue arose after upgrading to 3.1.0. We downgraded to version 2.1.3, and noticed that the app's URL slug was not set. Re-added the slug, and then upgraded to 3.1.0. Now the url routing is working properly. It seems that something in the version update corrupted the url slug reference.

[rockiger]

My team is also having this issue with Clean URLs and .

Did you try @jegenhoff 's solution. I couldn't reproduce the error. On a new installation/app it is working fine for me.

[Maadhav]

I've identified a potential issue with the rewrite rule set by the ReactPress router. The original rule was set for this regex:

^/demo//(.*)?

The double slash // seems to be erroneous, as standard URL patterns do not typically include this.

To resolve this, I added a custom rewrite rule and ensured it has the highest priority in the rewrite rules array. This prevents it from being overridden by other rules. Here's the code snippet for the custom rule:

function react_add_rewrite_rule($rules) {
    $newRules = array();
    // Corrected ReactPress rewrite rule
    $newRules['^demo/(.*)?'] = 'index.php?pagename=react-demo/';
    // Prioritize the new rule
    return $newRules + $rules;
}

add_filter('rewrite_rules_array', 'react_add_rewrite_rule');