React Router browserHistory nie działa zgodnie z oczekiwaniami

Question

jako użytkownik Chcę uzyskać dostęp do treści za pośrednictwem dzieje direkt na głębokim url

Sytuacja

na stronie głównej mam link do „o” stronie. kliknięcie zmiany treści zgodnie z oczekiwaniami. Strona zostanie załadowana, a adres URL zostanie zmieniony na localhost: 8080/about.

Gdybym teraz odświeżyć stronę i pojawia się błąd:

Cannot GET /about

Zastanawiam się, czy jest to normalne zachowanie czy też tęsknię za coś?

Trasy:

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

Główne:

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

O:

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

A moja 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

Podczas korzystania z browserHistory należy odpowiednio skonfigurować swój serwer, aby działał na wszystkich ścieżkach routowanych. Aby uzyskać szczegółowe informacje, patrz this.

Answer 2

Miałem ten sam problem. Tak jak powyżej, odpowiedź @ taion powiedziała, że ​​musimy skonfigurować serwer ekspresowy, aby dokonać szybkiego ponownego ładowania z adresami URL na trasach.

Ale jeśli nie chcesz używać ekspresowego serwera, aby po prostu zrobić gorące przeładowanie, użyj tego do uruchomienia projektu.

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

Wcześniej używałem tylko ten, który potrzebuje Server Express zostać skonfigurowany

webpack-dev-server --hot --inline 

UWAGA: Ale nadal uważam, trzeba skonfigurować dla nginx kiedy będziesz wdrożyć. Powyższe polecenia są tylko do celów programistycznych. Więc nie zapomnij spojrzeć na this jak powiedział @taion.

Answer 3

Jeśli używasz haustem-server-livereload, wystarczy dodać właściwość fallback skierowaną do indeksu

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