Sometimes, we want to fix React-router URLs don’t work when refreshing or writing manually.

In this article, we’ll look at how to fix React-router URLs don’t work when refreshing or writing manually.

How to fix React-router URLs don’t work when refreshing or writing manually?

To fix React-router URLs don’t work when refreshing or writing manually, we should make sure that we’re redirecting the React app URLs to index.html in our web server.

For instance, in Apache, we add the following to the .htaccess file.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

We intercept all URLs with

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l

And then we redirect them to index.html with

RewriteRule . /index.html [L]

Conclusion

To fix React-router URLs don’t work when refreshing or writing manually, we should make sure that we’re redirecting the React app URLs to index.html in our web server.