web-dev-qa-db-fra.com

React Router browserHistory ne fonctionne pas comme prévu

En tant qu'utilisateur, je souhaite accéder à du contenu en allant dire directement sur une URL profonde

Situation

Sur la page principale, j'ai un lien vers la page "à propos de". en cliquant sur le contenu change comme prévu . La page est chargée et l'url change en localhost: 8080/about.

Si j'actualise maintenant la page, j'obtiens l'erreur:

Je ne peux pas obtenir/à propos

Je me demande si c'est le comportement normal ou est-ce que j'ai oublié quelque chose?

Itinéraires:

var React = require('react');
var ReactRouter = require('react-router');

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var browserHistory = ReactRouter.browserHistory;
var Main = require('./components/Main');
var About = require('./components/About');

module.exports = (
  <Router history={browserHistory} >
    <Route path="/" component={Main}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
)

Principale:

var React = require('react');
var ReactRouter = require('react-router');
var Link = ReactRouter.Link;

module.exports = React.createClass({
  render: function() {
    return <div>
      <div>Header!!</div>
      {this.content()}
    </div>
  },
  content: function() {
    if(this.props.children) {
      return this.props.children
    } else {
      return (
        <div>
          <h1>Main</h1>
          <Link to={'about'}>To about</Link>
        </div>)
    }
  }
});

Sur:

var React = require('react');
module.exports = React.createClass({
  render: function() {
    return (<div>About</div>)
  }
});

Et mon package.json

{
  "name": "react-starter",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "browserify": "^13.0.0",
    "gulp": "^3.9.0 ",
    "gulp-concat": "^2.6.0",
    "gulp-react": "^3.1.0",
    "gulp-sass": "^2.1.1",
    "gulp-server-livereload": "1.6.2",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
    "node-notifier": "^4.4.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.7.0"
  },
  "devDependencies": {}
}
react-routerbrowser-history
12
Stefflan00

Lorsque vous utilisez browserHistory, vous devez configurer votre serveur de manière à servir sur tous les chemins routés. Voir this pour plus de détails.

7
taion

J'ai eu le même problème. Ainsi, comme indiqué ci-dessus, la réponse de @ taion indiquait qu'il était nécessaire de configurer Express Server pour effectuer un rechargement à chaud avec des URL dans les itinéraires.

Mais si vous ne souhaitez pas ajouter de serveur express uniquement pour effectuer le rechargement à chaud, utilisez-le pour exécuter votre projet.

webpack-dev-server -d --history-api-fallback --hot --inline --progress --colors

Auparavant, je n'utilisais que ce qui nécessite la configuration d'un serveur express

webpack-dev-server --hot --inline

NOTE: Mais je pense toujours que vous devez configurer nginx lorsque vous déploierez. Les commandes ci-dessus que j'ai dites sont uniquement à des fins de développement . Alors n'oubliez pas de regarder this comme @taion l'a dit.

6
myDoggyWritesCode

Si vous utilisez gulp-server-livereload, ajoutez simplement la propriété fallback pointant sur votre index

gulp.src(['dist'])
  .pipe(livereload({
    livereload: true,
    defaultFile: 'index.html',
    fallback: 'index.html',
    log: 'debug'
  }))
0
Johnny Gabriel