React-Router defekt nach dem Wechsel von Hash-Position zu browserLocation

Question

Ich kann nicht herausfinden, warum nach Wechsel von hashLocation zu jetzt mit browserLocation, dass, nachdem ich in der Lage bin auf den Link unten klicken, um zu navigieren (render das Interview) das Interview , aber jetzt aus irgendeinem Grund, sobald ich im Interview bin (ich werde zu der Interviewkomponente weitergeleitet, die rendert), wenn ich meinen Browser aktualisiere und versuche, interviews/companies/:companyId wieder zu treffen, wenn ich bereits auf derselben Seite bin, trifft es stattdessen meine Seite nicht in meiner express.js-Implementierung gefunden.

Also noch einmal, eine Zusammenfassung dieses: zum ersten Mal um, wenn ich den Link von meiner Haupt-Zielseite klicken, das ist, wo die <Link> resides..when i zuerst die Website laden, wenn ich das Klicken ... es ist in der Lage zu hit interviews/companies /: companyId und render die Interviewkomponente. Alles ist gut, bis Sie versuchen, zu aktualisieren, es bombardiert. Nicht sicher, warum

server.js

'use strict'; 

var express = require('express'), 
    app = module.exports = express(), 
    port = process.env.PORT || 3000, 
    path = require('path'); 

app.use(express.static('client')); 

app.use(function (req, res) { 
    res.send('Sorry, Page Not Found'); 
}); 


console.log("port we're about to run on: " + port); 

app.listen(port, function() { 
    console.log('Ready on port %d', port); 
}).on('error', function (err) { 
    console.log(err); 
}); 

Auf meiner Hauptzielseite, ich auf einen Link klicken, die wie folgt in einen meiner React Komponenten definiert sind:

<Link to={`/interviews/companies/${company.id}`} 
     params={{id: company.id}} 
     className="ft-company" 
     ref="link"> 
    {company.name} 
</Link> 

die funktioniert zunächst gut. Ich bin zu/Interviews/Unternehmen/6 zum Beispiel geschickt und es macht mein Interview Komponente gerade fein

Hier sind meine Route Definitionen:

const App = Component({ 
    render() { 
     return (
      <Router history={browserHistory} onUpdate={() => window.scrollTo(0, 0)}> 
       <Route path="/"> 
        <IndexRoute component={HomePage}/> 
        <Route name="interview" path="interviews/companies/:companyId" component={Interview}/> 
       </Route> 
       <Route path="/" component={Container}></Route> 
      </Router> 
     ); 
    } 
}) 

Answer 1

Sie müssen in Ihrem Webserver hinzufügen Eintrag den Index zu dienen .html für jede get html Anfrage.

die Bibliothek Import:

var history = require('connect-history-api-fallback'); 

Jetzt müssen Sie nur, wie so die Middleware zu Ihrer Anwendung hinzuzufügen:

var connect = require('connect'); 

var app = connect() 
    .use(history()) 
    .listen(3000); 

Natürlich können Sie auch dieses Stück verwenden können Middleware mit Express:

var express = require('express'); 

var app = express(); 
app.use(history()); 

https://github.com/bripkens/connect-history-api-fallback