web-dev-qa-db-ja.com

Apache Webサーバーでは/ aboutを更新することはできませんが、localhostでは正常に動作します

私は自分のプロジェクトの1つをまとめましたが、うまくいきます。ただし、ルート/ aboutで更新を押すと、「要求されたURL/aboutはこのサーバーで見つかりませんでした。」と表示されます。クライアント側のルーティングに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>
apache.htaccessreactjsdigital-oceanreact-router
22
Karan

ちょっとこれは実際にはかなり一般的なことです。

何が起こっているかは、ネストされたパスを無視し、すべてのリクエストを送信するようにApacheサーバーを取得する必要があることです/*代わりにルートに。これにより、フロントエンドのJavaScriptがクライアント側でルートを取得し、正しいビューを表示できます。

これは、異なるWebサーバーでは「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が見つかりません。

59
Mike Driver

Laravelの場合、すべてのルートが反応ファイルに書き込まれる同じビューをレンダリングする必要があります。 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>

ルートについて更新するたびに、app.jsファイルにウェルカムブレードとそれぞれのルートが表示されます

0
Abhijeet Verma