如何在reactjs中配置服务器重新加载页面

Question

我在centos操作系统上使用Apache 2.2来托管我的reactjs应用程序......在我的App.js中我有这个代码

import React from "react";
import { createBrowserHistory } from "history";
import { BrowserRouter, Route, Switch} from "react-router-dom";
import axios from "axios";
// import { useSelector } from "react-redux";

// core components
import AuthLayout from "layouts/Auth.js";
import RtlLayout from "layouts/RTL.js";
import AdminLayout from "layouts/Admin.js";
import LoginPage from "views/Pages/LoginPage";
import User from "layouts/User";

import "assets/scss/material-dashboard-pro-react.scss?v=1.10.0";
import moment from 'moment'

require('moment-timezone')
moment.tz.setDefault('Africa/Nairobi')

const App = () => {

  const hist = createBrowserHistory();

  axios.defaults.baseURL = `https://myurl.com:8443/strategy/api/`;

  return (
    <BrowserRouter history={hist}>
    <Switch>
      <Route path="/rtl" component={RtlLayout} />
      <Route path="/auth" component={AuthLayout} />
      <Route path="/admin" component={AdminLayout} />
      <Route path="/user" component={User} />
      <Route path="/" component={LoginPage} />      
          </Switch>
  </BrowserRouter>
  );
}

export default App;

然后我使用yarn build，构建文件夹中的所有内容都将移动到我的DocumentRoot文件夹/var/www/html/stratex

在这个 /var/www/html/stratex 中我还有一个 .htaccess 文件，并且在其中我有

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /subdirectory
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

在此之后，我重新启动了我的服务器：

sudo service httpd restart

当我进入 /admin/dashboard 时，一切都很好，当我点击刷新时，我得到了

The requested URL /admin/dashboard was not found on this server.

我还有另一个链接 /user/dashboard 加载正常，但刷新时显示

The requested URL /user/dashboard was not found on this server

有人遇到过这个问题吗？我在网上看到很多关于解决问题的 .htaccess 文件，但它对我来说根本不起作用。我还在我的 httpd.conf 中添加了这一行

LoadModule rewrite_module modules/mod_rewrite.so

任何建议/帮助将不胜感激。

Answer 1

为了解决这个问题，我在我的虚拟主机中添加了这个

 <Directory /var/www/html/stratex>
    AllowOverride All
 </Directory>

我遵循了这个教程。

我的 .htaccess 看起来像这样：

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

Answer 2

我在Apacahe服务器上遇到了同样的问题。还有一点很重要，除了.htaccess文件的配置，我们在构建react js代码时应该注意public/index.html文件，并且该文件必须具有以下标签。

<base href="/" />