I have a decentralized app with a React frontend. If I go to the homepage (https://app.valerianprotocol.com/), everything works fine and I can refresh the page without any problem. On the other hand, if I navigate to another page (for example https://app.valerianprotocol.com/pool), I will get a 404 page if I refresh. I have been debugging for 3 hours but I couldn't find anything. Can someone help me with what can be the problem? Maybe the page doesn't save the sessionid if it is not the home page?
1 Answers
The problem is that when using react with a router library (e.g React-router) you are not fetching the page "/pool" you simply change the content of the main html element inside index.html, and it works fine if you use links and navigation inside the React application. But when loading a page which is not the root, the server will try to serve the folder /pool which doesn't exist so it returns a 404 error. The options to solve this is to switch to a HashRouter for example or change the server configuration to redirect all into ìndex.html. Example of .htaccess rule:
<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>
Related