React Router browserHistory ne fonctionne pas comme prévu

En tant qu'Utilisateur, je veux accéder au contenu via d'aller directement sur une profonde url

Situation

Sur la Page Principale, j'ai un lien vers la page "à propos". en cliquant sur les changements de Contenu comme prévu.
La Page est chargée et les changements de l'url localhost:8080/about.

Si je refresh la Page, j'obtiens l'erreur:

Ne peuvent pas OBTENIR le /sur

Je me demande si c'est le comportement normal ou ai-je raté quelque chose?

Routes:

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

Principal:

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>)
    }
  }
});

Sujet:

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": {}
}

source d'informationauteur Stefflan00

  1. 6

    Lors de l'utilisation de browserHistoryvous devez configurer votre serveur de manière appropriée à servir à tous les acheminé chemins. Voir cette pour plus de détails.

  2. 6

    J'ai eu le même problème. Donc, comme ci-dessus @taion la réponse dit que nous avons besoin de configurer express server à faire chaud, rechargement avec des Url dans les itinéraires.

    Mais si vous ne voulez pas mettre de express server en outre juste pour faire des hot rechargement du travail, de l'utiliser pour lancer votre projet.

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

    Plus tôt, j'ai été en utilisant juste ce qui a besoin d'exprimer serveur à configurer

    webpack-dev-server --hot --inline

    REMARQUE: Mais je pense toujours que vous devez configurer pour nginx quand vous allez à déployer. Les commandes ci-dessus j'ai dit le sont uniquement à des fins de développement.
    Alors n'oubliez pas de regarder cette @taion dit.

  3. 0

    Si vous utilisez gulp-serveur-livereload, il suffit d'ajouter le fallback propriété pointant vers votre index

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