0

I have a react frontend applictaion with Rails API as backend. When I tries to register or signup or even if i click any menu links from application it redirects to clicked pages and everything works without any issue. but if i tries to reload/refresh any url it gives me 404 error. In development server everything works fine, but this issue is appearing only on production server.

Here is my react code. app.js

import React, { useState, useEffect } from "react";
import axios from "./Axios";
import { useHistory } from "react-router-dom";
import {
      BrowserRouter as Router,
      Route,
      Switch,
      Link,
      Redirect,
      withRouter,
} from "react-router-dom";
        
const App = () => {
      const [loggedInStatus, setLoggedInStatus] = React.useState("NOT_LOGGED_IN");
  const [user, setUser] = React.useState({});
  const history = useHistory();
  const [userName, setUserName] = React.useState("");
  const handleSuccessfulAuth = (data) => {
    handleLogin(data);
  };
const handleLogin = (data) => {
    if (data.status === "logged") {
      setLoggedInStatus("LOGGED_IN");
      setUser(data.user);
      history.push("/view-profile"); //redirect to profile if loggedin
    } else if (data.status === "created") {
      history.push("/login"); //redirect to login page if regsitration successfull
    }
  };

    return (
        <div className="container-fluid app-container">
            <Switch>
                <Route path="/" exact={true} component={Home} />
                <Route path="/login">
                  <Login handleSuccessfulAuth={handleSuccessfulAuth} />
                </Route>
                <Route path="/signup">
                  <Signup handleSuccessfulAuth={handleSuccessfulAuth} />
                </Route>
                 <Route path="/view-profile">
          <ProfileView job_seeker={user} />
        </Route>
                </Route>
                <Route path="/basic">
                  <Basic logged_user={user} />
                </Route>    
              </Switch>
            </div>
      );
};
        
export default App;

Gives me 404 error when i tries to refresh the page.

SreRoR
  • 1,151
  • 1
  • 17
  • 44

1 Answers1

0

Update:

for Nginx:

location / {
  try_files $uri /index.html;
}

According to Linode:

All NGINX configuration files are located in the /etc/nginx/ directory. The primary configuration file is /etc/nginx/nginx.conf.

If you don't find this file on this path, please create one.

Old Answer: (for Apache Servers)

Yes this happens on production servers. You need to add .htaccess file in your React directory with that source code into it.

The content of .htaccess file would be as follows:

<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>

You can change this as per requirement but this handles almost all normal scenarios.

Arslan Shahab
  • 639
  • 3
  • 9