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

Question

我在 centos OS 上使用 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.

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

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

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

中添加了这一行

LoadModule rewrite_module modules/mod_rewrite.so

任何 recommendations/help 将不胜感激。

Answer 1

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

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

我遵循了 this 教程。

我的 .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]

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

How to configure server for reloading page in reactjs

javascript

apache

.htaccess

react-router