reactjsreact-routerhttp-status-code-500

When uploading React app to server all routes except "/" return Internal Server Error

This is the first time I'm uploading a React app to a server (a GoDaddy one if it's relevant), for doing so i run "npm run build" as it says in the package.json, and then uploaded the build files through FileZilla. The landing page works alright until i want to redirect to another page like "/quiz" for example. Then i get the following message "Internal Server Error The server encountered an internal error or misconfiguration and was unable to complete your request. [...] Additionally, a 500 Internal Server Error error was encountered while trying to use an ErrorDocument to handle the request."

I've tried changing all the file permissions to 0755 in FileZilla and nothing happened. I'm thinking that maybe when i tried deploying to github pages in the past i may have changed something important in package.json

I would like to know if it's a mistake i'm doing in react router (that I put in App.js), a package.json mistake or it's on the server side.

You can see the source code here

Solution

  • You need a '.htaccess' in your build folder.

    Add these lines of codes inside the '.htaccess' folder

    Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

    Or maybe you should consider looking in your server files configuration. For Apache here.