Apache Web 服务器不允许我刷新 /about 但在 localhost 上它工作正常

IT技术 apache .htaccess reactjs digital-ocean react-router
2021-04-22 08:27:55

我捆绑了我的一个项目，它运行良好。但是，当在路由 /about 上刷新时，它显示在此服务器上找不到请求的 URL /about .. 但是，当我在我的本地主机上关闭 Web 服务器时，它在刷新和前进/后退按钮上工作正常。我正在使用 react-router 进行客户端路由。

继承人的客户端路由，但我怀疑它的问题

 Router.run(routes, Router.HistoryLocation, function (Handler) {
    React.render(<Handler/>, app);
 });

我的路线就在那里：

let routes = (
<Route>
  <Route name = "App" path="/" handler = {App}>
    <Route name="About" path="/about" handler = {About}/>
    <DefaultRoute name="Projects" handler = {Projects}/>
  </Route>
</Route>
        );

这是我认为我破坏的 APACHE：

<Directory /var/www/>
                # This directive allows us to have apache2's default start page
                # in /apache2-default/, but still have / go to the right place
Require all granted
                #RedirectMatch ^/$ /apache2-default/
        </Directory>

kkotwal.me.conf:

<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        #
        ServerName kkotwal.me
        ServerAlias www.kkotwal.me
        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/kkotwal.me/public_html

        # Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
        # error, crit, alert, emerg.
        # It is also possible to configure the loglevel for particular
        # modules, e.g.
        #LogLevel info ssl:warn

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
2个回答

嘿嘿这其实是很常见的事情。

发生的事情是你需要让你的 apache 服务器忽略任何嵌套的路径，而只是将所有请求发送/*到 root。这样你的前端 javascript 就可以在客户端获取路由并显示正确的视图。

这有时在不同的网络服务器中被称为“HTML5 模式”。

在 apache 中，您这样做的方式是添加如下规则：

  RewriteEngine On  
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  RewriteRule ^ /index.html [L]

这样做是告诉 Apache 提供任何存在的文件，但如果它们不存在，则只提供服务/index.html而不是 404 not found。

没关系，通过将它添加到虚拟主机下的 webconfig 文件来让它工作，谢谢。
2021-05-26 08:27:55
我在哪里写这个规则？我是否还必须在终端中输入任何命令来激活重写？
2021-06-02 08:27:55
这也可以添加到与.htaccess文件位于同一文件夹中的index.html文件中，但您可能希望将其包装在<IfModule mod_rewrite.c></IfModule>标签中
2021-06-02 08:27:55
我尝试了上述解决方案，但没有奏效。我在 htaccess 文件中添加了上面的代码。
2021-06-03 08:27:55
在 httpd.config 下，我相信它有 <directory var/....> 只需在下面添加 Mike 所说的内容即可切换到 HTML5 模式。
2021-06-13 08:27:55

在 laravel 的情况下，您需要渲染相同的视图，其中所有路由都为 react 文件编写。Laravel 路由写成：

Route::get('{url}', function () { return view('welcome'); })->where(['url' => '.*']);

欢迎刀片文件是：

<!doctype html> 
<html lang="{{ app()->getLocale() }}">
    <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Laravel</title>
         <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
         <div id="root"></div>
         <script src="{{asset('js/app.js')}}" ></script>
    </body> 
</html>

路由的 app.js 文件

 <Route>
     <Route name = "App" path="/" handler = {App}>
     <Route name="About" path="/about" handler = {About}/>
     <DefaultRoute name="Projects" handler = {Projects}/>
   </Route>

所以每次你刷新 about 路由时，它都会在 app.js 文件中显示欢迎刀片及其各自的路由

其它你可能感兴趣的问题
上一篇如何在 React 中使用 Fabric.js？ 下一篇你如何从 React 中的 cdn/script 标签导入一个 javascript 包？