Reagieren Router browserHistory nicht wie erwartet funktioniert

Question

Als Nutzer i Inhalt via geht direkt auf einer tiefen url

Situation

auf der Hauptseite zugreifen will, muss ich einen Link zu „über“ Seite. Klicken auf den Inhalt ändert sich wie erwartet. Die Seite wird geladen und die URL ändert sich in localhost: 8080/about.

Wenn ich jetzt die Seite aktualisieren erhalte ich die Fehlermeldung:

Cannot GET /about

Ich frage mich, ob dies das normale Verhalten ist oder habe ich verpasst etwas aus?

Routen:

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

Main:

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

Über:

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

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

Answer 1

Wenn Sie browserHistory10 verwenden, müssen Sie Ihren Server entsprechend konfigurieren, um auf allen gerouteten Pfaden zu dienen. Einzelheiten finden Sie unter this.

Answer 2

Ich hatte das gleiche Problem. Wie oben @aions Antwort sagte, müssen wir Express-Server konfigurieren, um Hot-Reloads mit URLs in Routen durchzuführen.

Aber wenn Sie nicht möchten, Express-Server zusätzlich nur um heiße Nachladearbeiten zu machen, verwenden Sie dies um Ihr Projekt zu starten.

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

Früher war ich mit nur diese, die Express-Server muss konfiguriert

webpack-dev-server --hot --inline 

HINWEIS werden: Aber ich denke immer noch, Sie nginx konfigurieren müssen, wenn Sie bereitstellen werden. Die oben genannten Befehle sind nur für Entwicklungszwecke gedacht. Also vergessen Sie nicht, sich this zu betrachten, wie @taion sagte.

Answer 3

Wenn Sie schluck-Server-livereload verwenden, fügen Sie einfach die fallback Eigenschaft zu Ihrem Index zeigt

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