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.
