页面刷新/重新加载上的 React Js 应用程序给出错误

Question

我有一个使用 Rails API 作为后端的反应前端应用程序。当我尝试注册或注册时，或者即使我单击应用程序中的任何菜单链接，它也会重定向到单击的页面，并且一切正常，没有任何问题。但如果我尝试重新加载/刷新任何 url，它会给我 404 错误。在开发服务器中一切正常，但此问题仅出现在生产服务器上。

这是我的反应代码。 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;

当我尝试刷新页面时给我 404 错误。

Answer 1

更新：

对于 Nginx：

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

根据 Linode：

所有 NGINX 配置文件都位于 /etc/nginx/ 目录中。主配置文件是/etc/nginx/nginx.conf。

如果您在此路径上找不到此文件，请创建一个。

旧答案：（适用于 Apache 服务器）

是的，这发生在生产服务器上。您需要在 React 目录中添加 .htaccess 文件，并将该源代码放入其中。

.htaccess 文件的内容如下：

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

您可以根据需要更改此设置，但这几乎可以处理所有正常情况。