React-Router "Kann nicht GET/*" außer Root-URL

Question

Ich bin bereit, React-Router für meine Anwendung zu verwenden, und ich versuche zuerst, die ich unten kopiert. Wenn ich nun zu localhost:3000/ gehe, sehe ich "App" wie erwartet, aber jede andere Seite, wie localhost:3000/inbox gibt "Can not GET/inbox" zurück. Was fehlt mir hier?

var About = React.createClass({ 
    render: function() { 
    return <h2>About</h2>; 
}}); 

var Inbox = React.createClass({ 
    render: function() { 
    return <h2>Inbox</h2>; 
}}); 

var App = React.createClass({ 
    render() { 
    return (
     <div><h1>App</h1> 
     <RouteHandler/> 
     </div> 
)}}); 

var routes = (
    <Route path='/' handler={App}> 
    <Route path="about" handler={About}/> 
    <Route path="inbox" handler={Inbox}/> 
    </Route> 
); 

Answer 1

Ich glaube, das Problem ist, dass Sie eine http Ressourcenanfrage machen:

GET /inbox HTTP/1.1 
Host: localhost:3000 

aber verwenden clientseitige nur Routing. Möchten Sie auch serverseitig rendern? Möglicherweise müssen Sie den Routerstandort auf HistoryLocation anstelle von HashLocation (Standardeinstellung) ändern.

Die Standort-Prop von sagt es, wo die Routen gegen übereinstimmen. Wenn Sie nicht auf der Serverseite React arbeiten, müssen Sie Router.HashLocation verwenden (oder einfach leer lassen).

Wenn nicht, greifen Sie falsch auf Ihre Komponente zu. Versuchen Sie es mit http://localhost:3000/#/inbox. Es kann etwas dauern, sich mit React-Router vertraut zu machen, aber es lohnt sich auf jeden Fall!

React Router Documentation - HashLocation

Answer 2

Simplest Option: Verwendung Hash-Geschichte statt. Die URLs sind nicht sehr nett und wenn Sie eine bessere SEO benötigen, würde ich mich auch für das serverseitige Rendering entscheiden.

Wenn Sie im Detail über diese interessiert sind, war diese Antwort für mich sehr hilfreich: React-router urls don't work when refreshing or writting manually

Answer 3

Wenn Sie webpack-dev-server verwenden es eine Option history-api-fallback genannt wird. Wenn der Wert true ist, wird 404s auf /index.html zurückgesetzt.

Fügen Sie die Option devServer Abschnitt der Webpack Config wie folgt aus:

devServer: { 
    contentBase: 'app/ui/www', 
    devtool: 'eval', 
    hot: true, 
    inline: true, 
    port: 3000, 
    outputPath: buildPath, 
    historyApiFallback: true, 
}, 

Link zu Webpack docs: https://webpack.github.io/docs/webpack-dev-server.html

Answer 4

Die Anfrage wird an den Server gesendet werden, und das Verzeichnis/Datei nicht existiert wirklich, so wird es 404 zurückgeben, also müssen Sie dem Server mitteilen, dass er die Indexseite für alle Anfragen zurückgibt, und reactive wird das Rooten behandeln:

Wenn Sie wie ich, hosten Sie Ihre Reaction-App auf IIS, jus t fügen Sie eine web.config-Datei enthält:

<?xml version="1.0" encoding="utf-8"?> 
<configuration> 
    <system.webServer> 
    <httpErrors errorMode="Custom" existingResponse="Replace"> 
     <remove statusCode="404" subStatusCode="-1" /> 
     <error statusCode="404" path="/" responseMode="ExecuteURL" /> 
    </httpErrors> 
    </system.webServer> 
</configuration> 

Diese IIS-Server anweisen, die Haupt-Seite an den Client statt 404-Fehler zurück.