web-dev-qa-db-fra.com

React-router 2.0 browserHistory ne fonctionne pas lors de l'actualisation

Les codes ci-dessous indiquent le code 404 introuvable lors de l'actualisation de la page http: // localhost/about . Mais si browserHistory est changé en hashHistory, cela fonctionnera bien.

Voici mon fichier js.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory, hashHistory } from 'react-router';
import $ from 'jquery';

class App extends Component {
  render() {
    return (
      <div>
        <h1>APP!</h1>
        <Link to="/about">/about</Link>
        {this.props.children}
      </div>
    )
  }
}

class About extends React.Component {
  render() {
    return (
      <div>
        <h2>About 33</h2>
      </div>
    )
  }
}

var routes = (
    <Router history={hashHistory}>
        <Route path="/" component={App} />
        <Route path="/about" component={About} />
        <Route path="/wealth" component={WealthExpectation} />
    </Router>
)

$(document).ready(function() {ReactDOM.render(routes, document.getElementById("hello"))});

Et le fichier HTML.

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello React</title>
        <script type="text/javascript" src="/static/js/jquery-1.12.2.min.js"></script>
        <script type="text/javascript" src="/static/js/script.js"></script>
        <!-- build:css -->
          <link rel="stylesheet" type="text/css" href="/static/bower_modules/c3/c3.min.css">
        <!-- endbuild -->
    </head>
    <body>
        <div id="hello">a</div>
        <div id="world"></div>
    </body>
</html>

J'ai lu les questions sur react-router v2.0 browserHistory ne fonctionne pas et Les URL de React-router ne fonctionnent pas lors de l'actualisation ou de l'écriture manuelle . Pour le premier, j'ai déjà défini le chemin d'accès au chemin absolu, mais ne fonctionne toujours pas. Pour le second, j'ai essayé d'importer express mais j'ai échoué ('Uncaught TypeError: impossible de lire la propriété' prototype 'de undefined').

reactjsreact-routerjsx
5
Cuero

Pour approfondir la réponse de Phi Nguyen, la raison pour laquelle hashHistory fonctionne et que browserHistory échoue est que hashHistory est en quelque sorte un "hack" ou une solution de contournement permettant à votre application de manipuler l'URL sans que le navigateur ne remarque et envoie une demande GET à votre serveur. Essentiellement, tout ce qui suit le hachage est ignoré.

browserHistory est généralement préféré car il a l'air mieux, mais vous n'avez plus la solution de contournement par hachage et vous avez besoin d'autres moyens pour empêcher votre navigateur d'essayer d'envoyer des demandes à votre serveur. SI vous utilisez Webpack, il existe un moyen simple de faire en sorte que toutes les demandes retombent en une seule demande. Par exemple:

GET to http: // localhost: 8080/ AND a GET to http: // localhost: 8080/about tous deux se replieraient vers http: // localhost: 8080/ et réagiraient routeur traiterait avec le/sur. (C’est la raison pour laquelle vous êtes en mesure de naviguer vers/sur fine, mais si vous actualisez vous obtenez une erreur 404, vous envoyez une GET à/à propos de qui n’existe pas sur votre serveur)

Pour ce faire, vous devez implémenter une fonctionnalité Webpack appelée history api fallback. Il y a deux façons de faire ça.

À partir du didacticiel/du didacticiel de react-routeur, vous pouvez configurer votre script start pour ressembler à ceci:

"start": "webpack-dev-server --inline --content-base . --history-api-fallback"

Où --history-api-fallback est la pièce importante pour quiconque avec cette erreur.

OU vous pouvez modifier votre fichier webpack.config.js pour qu'il apparaisse gérer cela sur votre serveur dev.

  devServer: {
    historyApiFallback: true,
    ...other stuff..
  },
14
jmancherje

Une autre solution, simple et peu coûteuse, consiste à faire en sorte qu'Apache mappe toute requête vers votre application React. Par exemple: http://localhost/about passe en interne à travers http://localhost/[my-own-html-file.html]

Par exemple, si notre application React commence à index.html, vous devez créer un fichier .htaccess sur votre application React et insérer le code suivant:

# Map all non-existing URLs to be processed by index.html,
# so any URL that doesn't point to a JS file, CSS file, etc etc...
# goes through my React app.

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_URI} !=/favicon.ico
  RewriteRule ^ index.html [L]
</IfModule>

En passant, ce code HTACCESS a été adapté de Drupal 8: https://github.com/drupal/drupal/blob/8.2.x/.htaccess

7
Ignacio Segura

Lorsque vous utilisez browser history, le serveur ne sait pas comment gérer l'URL modifiée dans le navigateur uniquement. Ce tutorial vous apprendra comment supprimer # de l’URL et faire fonctionner browser history.

2
Phi Nguyen

Afin d'utiliser browserHistory, vous devez implémenter un serveur express pour gérer les URL réelles. hashHistory n'a pas besoin d'un serveur express.

Consultez le guide suivant:

https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md

1
Antonis Zisis

J'ai l'URL en ajoutant cette ligne au bloc du serveur NGINX

try_files $uri $uri/ /index.html

Le serveur vous donne un 404 parce que le/about ne se ferme pas. Vous devez forcer chaque requête à passer par le fichier index de votre construction pour que le composant Routeur puisse sélectionner le/à propos de et charger la page correctement.

0
Tom Toms