web-dev-qa-db-fra.com

Le serveur web Apache ne me permet pas d'actualiser mais sur localhost il fonctionne bien

J'ai regroupé l'un de mes projets et cela fonctionne bien. Cependant, lorsque vous cliquez sur refresh sur un itinéraire/à propos, il affiche L'URL demandée/à propos n'a pas été trouvé sur ce serveur. Toutefois, lorsque je le fais sur mon hôte local d'un serveur Web, cela fonctionne correctement avec les boutons d'actualisation et de transfert/retour. J'utilise react-router pour mon routage côté client. 

Voici le routage côté client mais je doute que c'est le problème 

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

Et mes itinéraires sont juste là:

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

Voici l'Apache que je pense avoir brisé: 

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

Hé c'est en fait une chose assez commune. 

Ce qui se passe, c’est que vous devez demander à votre serveur Apache d’ignorer tous les chemins imbriqués et d’envoyer simplement toutes les requêtes /* à la racine. De cette façon, votre javascript frontal peut capturer la route côté client et afficher la vue correcte.

Cela est parfois appelé "Mode HTML5" dans différents serveurs Web.

Pour cela, dans Apache, ajoutez une règle comme celle-ci:

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

  RewriteRule ^ /index.html [L]

Cela revient à dire à Apache de servir les fichiers existants, mais s'ils n'existent pas, il suffit de servir /index.html plutôt que 404 non trouvé. 

57
Mike Driver

Dans le cas de laravel, vous devez afficher la même vue où toutes les routes sont écrites pour réagir au fichier. Laravel route est écrit comme:

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

le fichier de bienvenue de la lame est:

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

fichier app.js pour route

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

ainsi, chaque fois que vous actualisez votre itinéraire, le panneau de bienvenue et ses itinéraires respectifs s'affichent dans le fichier app.js.

0
Abhijeet Verma