Source:  Twitter logo

I have a react app, created using create-react-app.

After I run npm run build, and deploy the app as a static site, everything works except when I refresh the page on a route other than the index, it fails with a 500 internal server error.

Below is the code for my router. Using react-router.

<Router history={browserHistory}>
  <Route path="/">
      <IndexRoute component={Login}/>
      <Route path="/dashboard" component={Dashboard}></Route>
      <Route path="/profile" component={Profile}/>

Any help appreciated.

When you’re visiting a route of your app directly, e.g. via Apache tries to map that URL to a file in the public folder. In this case it looks for /route/123.html which obviously doesn’t exist. To avoid that, we have to tell Apache to redirect all requests to our index.html so our app can perform some routing magic for that URL. To tell Apache to redirect requests to index.html where our app lives, we have to modify the .htaccess file. If there is no such file in your app’s folder yet, just create it.

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

for more information check this out.

9 users liked answer #0dislike answer #09
Mehdi Hosseini profile pic
Mehdi Hosseini

Your server's route should match the routes defined in the react-router, If they don't match then you will receive a 500 error.

3 users liked answer #1dislike answer #13
Vaibhav Singh profile pic
Vaibhav Singh

Can you share some error log screenshot or copy-paste ? 500 is a server-side error, obviously. Maybe your routes on server are not matching the url pattern. Or some express server route function threw an exception.

Please, provide some logs from client and\or server.

UPD: Just mentioned the "static site" thing. Didn't understand what exactly do you mean by that. For me it's no server at all.

Still i'm pretty sure that your server has no routes configured.

Server knows what is "/"("index.html"). But there are no routes configured for, say, "/potatoes".

In express server you would do something like:

app.get('*', function(req, res){
  res.sendFile(__dirname + '/index.html');
  • meaning, ALL GET REQUESTS to your server(app) will lead the user to same "index.html".
1 users liked answer #2dislike answer #21
Alex Frolov profile pic
Alex Frolov
Create a file .htaccess file in react js root folder where index.html

and add the below code

    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

Save the .htaccess file and enjoy your working

0 users liked answer #3dislike answer #30
haroon kiani profile pic
haroon kiani

This one works nice for me :

  # React Router
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
0 users liked answer #4dislike answer #40
gordie profile pic

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).