web-dev-qa-db-fra.com

React-router "ne peut pas obtenir/*" sauf pour l'URL racine

Je suis prêt à utiliser React-router pour mon application et j'essaie l'exemple donné dans le document doc first, que j'ai copié ci-dessous. Maintenant, quand je vais à localhost:3000/, je vois "App" comme prévu, mais toutes les autres pages, telles que localhost:3000/inbox, renvoient "Cannot GET/inbox". Qu'est-ce que j'oublie ici ?

var About = React.createClass({
  render: function () {
    return <h2>About</h2>;
}});

var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
}});

var App = React.createClass({
  render () {
    return (
      <div><h1>App</h1>
        <RouteHandler/>
      </div>
)}});

var routes = (
  <Route path='/' handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);
reactjsreact-router
23
JulienD

Je pense que le problème est que vous faites une demande de ressource http:

GET /inbox HTTP/1.1
Host: localhost:3000

mais utilisent uniquement le routage côté client. Avez-vous l'intention de faire également un rendu côté serveur? Vous devrez peut-être modifier l'emplacement de votre routeur pour qu'il soit HistoryLocation au lieu de HashLocation (valeur par défaut). 

L'emplacement prop de Router.run lui indique où faire correspondre les routes. Si vous n'exécutez pas React côté serveur, je pense que vous devez utiliser Router.HashLocation (ou le laisser vide). 

Sinon, vous accédez à votre composant de manière incorrecte. Essayez d'utiliser http://localhost:3000/#/inbox. Cela peut prendre un peu de temps pour vous familiariser avec React-Router mais cela en vaut vraiment la peine! 

Documentation React Router - HashLocation

16
Brad Bumbalough

Si vous utilisez webpack-dev-server, il existe une option appelée history-api-fallback. Si défini sur true, 404 replieront vers /index.html.

Ajoutez l'option à la section devServer de la configuration Webpack comme ceci:

devServer: {
    contentBase: 'app/ui/www',
    devtool: 'eval',
    hot: true,
    inline: true,
    port: 3000,
    outputPath: buildPath,
    historyApiFallback: true,
},

Lien vers les documents Webpack: https://webpack.github.io/docs/webpack-dev-server.html

56
tobi

Option la plus simple: utilisez plutôt l'historique de hachage. Les URL ne sont pas très jolies et si vous avez besoin d'un meilleur référencement, j'opterais également pour le rendu côté serveur.

Si vous êtes intéressé par les détails, cette réponse m'a été très utile: Les URL de React-router ne fonctionnent pas lors de l'actualisation ou de l'écriture manuelle

2
thevangelist

Je suis tombé sur le même problème si vous avez un serveur qui répond aux demandes et un HashRouter si vous utilisez un serveur de fichiers statique. Au lieu d'utiliser BrowserRouter, utilisez HashRouter, ce n'est pas le correctif idéal, mais devrait résoudre l'erreur ne peut pas obtenir "/ chemin". assurez-vous d'importer HashRouter à partir de 'react-router-dom'

render() {
    return (
        <div>
            <HashRouter>
                <Blog />
            </HashRouter>
        </div>
    );
}

source: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/basic-components.md

0
tony2tones

La demande sera envoyée au serveur, et le répertoire/fichier n’existant pas vraiment, il renverra 404; vous devez donc indiquer au serveur de renvoyer la page d’index pour toutes les demandes et réagira pour gérer l’enracinement:

si, comme moi, vous hébergez votre application de réaction sur IIS, ajoutez simplement un fichier web.config contenant:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

Ceci indiquera à IIS serveur de renvoyer la page principale au client au lieu de l'erreur 404.

0
Chtiwi Malek