web-dev-qa-db-fra.com

Servir une autre page (autonome) ou un fichier statique dans un site Web créé avec react

J'ai un site Web construit avec réagir, qui utilise réagir-routeur. Pour une route donnée, je souhaite servir une autre page ou un autre fichier statique, mais comme toutes les demandes sont transmises au routeur, son fonctionnement ne fonctionne pas. 

par exemple 

www.myapp.com/sitemap.xml
www.myapp.com/something.html

^ Ce lien fonctionne pour la première fois, mais une fois que je charge le site Web, il ne fonctionne pas car toutes les demandes passent par le routeur. 

Toute solution pour le faire fonctionner tout le temps. Merci.

Modifier

J'utilise le serveur Apache qui est configuré pour rediriger toutes les demandes vers index.html, je suppose que c'est la raison de ce comportement. Ceci est ma configuration, mais je ne sais pas comment résoudre ce problème.

Options -MultiViews
RewriteEngine On

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_Host}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Mise à jour J'ai essayé la solution suggérée en réponse. 

mes routes ressemble à ceci, pour quelque chose.html je charge le composant ServerLoad

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/about" component={About} />
    <Route path="something.html" component={ServerLoad} />
    <Route component={NoMatch} />
</Switch>

Dans la fonction composantDidMount du composant ServerLoad, je l'ai fait. Mais ça ne marche pas. 

componentDidMount() {
    window.location.reload(true);
}

More J'ai configuré ce projet en utilisant create-react-app, et en le servant par serveur express ( comme ceci ). Je ne sais pas si j'ai besoin de régler certains paramètres pour servir d'autres fichiers statiques.

javascriptapachereactjsreact-router
22
Abhishek

Cela devrait fonctionner:

const reload = () => window.location.reload();

<Router>
  // all your routes..
  ...

  // Your special routes..
  <Route path="/sitemap.xml" onEnter={reload} />
  <Route path="/something.html" onEnter={reload} />
</Router>

Donc, je pense que cela devrait être assez clair ce que ça fait;)

Mettre à jour: 

si c'est une option, vous pouvez simplement mettre target = "_ blank" attribut dans votre <Link>

IMHO c'est encore mieux du point de vue de l'UX, car si ces routes ne font pas partie de votre application principale, l'utilisateur peut simplement changer d'onglet après avoir visité cette page spéciale.

6
webdeb

Il s’agit d’un comportement indésirable de ServiceWorker.js. Utilisez le commentaire ci-dessous et modifiez-le dans index.js de votre projet React.

import { unregister } from './registerServiceWorker';
unregister();

https://github.com/facebookincubator/create-react-app/issues/2715

2
Angelo Giuseppe

Utilisez Switch associé à un composant NoMatch, associé à la solution de webdeb:

<Router>
  <div>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/admin" component={Admin} />
      <Route component={NoMatch} />
      <Route onEnter={() => window.location.reload()} />
    </Switch>
  </div>
</Router>

Cela correspondra aux routes, affichera 404 si aucune href valide n'existe et montrera un fichier ou quelque chose si c'est une href valide.

0
corysimmons