Wie reagieren die router reagieren darauf mit 404 status-code?

Ich bin mit reagieren router als Wurzel und alle Anfragen, die unter "/" gerichtet sind, zu reagieren-router. Und wenn reagieren router gefunden, dass die url nicht als übereinstimmung mit einer der definierten Komponenten, macht es mit NoMatch-Komponente. Und hier geht das problem, NoMatch gerendert wird, und das ist, was ich will, aber der status-code ist immer noch 200 statt 404. Und wenn meine css-oder js-Dateien befinden, mit einer falschen url zu reagieren-router macht das gleiche, antwortet er mit 200! Und dann wird die Seite sagt mir, dass es einige problem mit meinen Ressourcen Inhalt geben!

So, wie kann ich reagieren, router, alles zu behandeln, die "/" und noch bekommen, zur Behandlung von 404-Fehler direkt(reagieren mit 404 status-code)?

code reagieren-router

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="archived" component={App}>
        <IndexRoute component={ArchivedPage}/>
        <Route path="project/:projectId" component={ArchivedDetailPage}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>
), document.getElementById('app'));

den servre Seite

  router.use('/', function(req, res, next) {
    res.render('index-react', {
      title: 'some title'
    });
  });
  • Was haben Sie schon ausgedacht? Einige code
  • code ist serviert, jetzt
  • Ich fügte hinzu, dass prop, sondern reagieren-router nicht damit umgehen, es wird nicht emittieren status 404-Fehler. Ist es möglich, emittieren einen 404-status-Fehler via javascript?
InformationsquelleAutor Liang | 2016-03-17
  1. 14

    Mit reagieren-router 2.0.0 können Sie tun:

    <Route path="*" component={NoMatch} status={404}/>

    EDIT:

    Was Sie tun müssen, ist, um ein benutzerdefiniertes Attribut erstellen, die auf Ihrer route definition, wie Sie oben sehen können (status).

    Wenn Sie zum Rendern Sie die Komponente auf server-Seite, überprüfen Sie auf dieses Attribut und sendet eine Antwort mit dem code dieses Attribut:

    routes.js

    import React from 'react';
import {IndexRoute, Route} from 'react-router';

import {
    App,
    Home,
    Post,
    NotFound,
} from 'containerComponents';

export default () => {
    return (
    <Route path="/" component={App}>

        <IndexRoute component={Home} />
        <Route path='post/' component={Post} />

        { /* Catch all route */ }
        <Route path="*" component={NotFound} status={404} />

    </Route>
  );
};

    server.js:

    import { match } from 'react-router';
import getRoutes from './routes';
....
app.use((req, res) => {
match({ history, routes: getRoutes(), location: req.originalUrl }, (error, 
        redirectLocation, renderProps) => {
        if (redirectLocation) {
          res.redirect(redirectLocation.pathname + redirectLocation.search);
        } else if (error) {
          console.error('ROUTER ERROR:', error);
          res.status(500);
        } else if (renderProps) {

            const is404 = renderProps.routes.find(r => r.status === 404) !== undefined;
        }
        if (is404) {
          res.status(404).send('Not found');
        } else {
            //Go on and render the freaking component...
        }
    });
});

    Tut mir Leid, dass... auf jeden Fall ist meine Lösung nicht funktioniert von selbst, und ich verpasste das richtige Stück code, wo Sie tatsächlich überprüfen Sie auf dieses Attribut und entsprechend Rendern.

    Wie Sie sehen können, ich senden Sie einfach die "Nicht gefunden" - text an den client, allerdings wäre es am besten, wenn Sie fangen die Komponente für die Darstellung von renderProps (NoMatch in diesem Fall) und render es.

    Cheers

    • Was ist der status parameter für? Ich kann nicht finden jede Bezugnahme auf Sie in der Dokumentation.
    • Ich fand es nie auf die docs entweder.. ich denke, es ist die unvollendete "Erweiterte Verwendung" - Teil der 2.x-docs. Aber es funktioniert, also muss das fehlen von dort, und ich fand diese Lösung irgendwo kann ich mich nicht erinnern...
    • Dieser parameter setzt den status automatisch auf Ihr Wunsch Objekt.
    • Der router weiß nicht, etwas über das response-Objekt! Wie wäre es, in der Lage, den status? In meinem server-side-code habe ich den status selbst. Wie finde ich heraus, ob der router bekam eine 404-Seite?
    • ES FUNKTIONIERT NICHT!!! Ich habe es!
    • Ich aktualisierte die Antwort.. check it out.

    InformationsquelleAutor rmartrenado
  2. 6

    Zen: Was ist der Fehlercode für einen silent-Netzwerk?

    Ich verwirrt über diese Frage, wie auch. Der sonderbare Fall, Sie ändern Sie nicht den HTTP-Fehlercode. Wir denken, wir sollten, weil eine zufällige URL aufgerufen wurde, aber warum?

    In einem SPA (Single Page Anwendung), gibt es nicht den Netzwerkverkehr, sondern nur Wechsel der Scheiben. Die HTTP-Fehler-code in die Header für die Zustellung einer neuen Seite steht, während der gesamte Inhalt ist in einer benannten <div> nicht neu laden einer neuen Seite. Würde man brauchen, werfen Sie-Seite, die übertragung und die Darstellung einer neuen Seite 404 code zurück, und dann senden Sie die original-Seite wieder, wenn der Benutzer bewegt sich Weg.

    Und nur der Benutzer. Die 404-error-code, oder jede andere HTTP-code, ist wirklich ein Hinweis an den browser oder eine Dienstleistung. Wenn der requester ist ein browser, der Mensch ist gegeben, eine bessere Indikation als die browser bieten könnte. Wenn der Anforderer einen crawler, ist es wahrscheinlich, scans für 404 in <h1>'s. Wenn der requester mit Ihrer website als eine API, warum ist das eine gute Sache?

    Also die Antwort ist, dass wir den HTTP-status-codes aus Gewohnheit. Nicht.

    • Auch in einem SPA, kann es eine erste direkte Anfrage an eine URL, die nicht existieren, die das React-router zurecht. Ersetzen eines Jahrzehnte alten standard zu signalisieren, ob eine URL vorhanden ist oder nicht (status-code) mit der Hoffnung, dass die website-designer kommunizieren Sie effektiv klingt nicht wie eine gute Idee. Jeder website-designer wird, teilen Sie dies anders und führt Inkonsistenz bei jedem Versuch, zu verstehen (Menschen) oder analysieren (crawler).
    • Beachten Sie, dass Ihr argument "das ist anders, also ist es schlecht". Sie könnte einen Fall machen, dass ein 404 ist die richtige Antwort für eine SPAs, die Unterstützung von "deep linking" - aber nicht unterstützen, sinnvolle URLs für das deep-linking und wenn Sie können verfolgen, Ihr einen deep link kommt, und Sie wollen die richtige Antwort gehen an die Raupen.
    • Nicht wirklich. Ich nur widersprechen, die Einstellung HTTP-status-codes ist lediglich eine Gewohnheit. Das ist es nicht. Es ist etwas, das war und absichtlich erfolgt ist, mit spezifischen Vorteile (bereits in meinem ersten Kommentar). Das heißt, die Art, wie ich dies lösen, in meinem Fall ist, ich habe meine Rails-app Punkt speziell zu den Routen Reagieren in der Lage ist zu handhaben. Dieser Weg alles andere ist eine normale HTTP-Antwort mit einem 404-status.
    InformationsquelleAutor Charles Merriam
  3. 4

    Um dies zu tun, müssen Sie ausführen, um das match auf dem server als auch, um zu sehen, wenn Sie eine route entspricht. Natürlich, wenn Sie gehen, um dies zu tun, können Sie gut tun, vollwertiges server-side-rendering, wie gut! Konsultieren Sie die server-rendering-guide.

    InformationsquelleAutor taion
  4. 1

    Ich habe einige Graben, dies ist, wie wir Dinge tun, in der v4 Version.

    <Route
  render={({ staticContext }) => {
    if (staticContext) {
      staticContext.statusCode = 404
    }
    return <NotFound />
  }}
/>

    Den Route Komponente wird verwendet, um den Zugriff auf die staticContext die eine statusCode Stütze, die Sie festlegen können, wenn Sie die StaticRouter Komponente zum Rendern auf dem server.

    Server-code sieht ungefähr so aus (mit einigen Typoskript Eingabe)

    const currentLocation: Location = {
  pathname: req.pathname,
  search: req.search,
  hash: '',
  state: undefined
}

const staticRouterContext: StaticContext & StaticRouterContext = {}

ReactDOMServer.renderToString(
  <StaticRouter location={currentLocation} context={staticRouterContext}>
  ...
  </StaticRouter>
)

if (staticRouterContext.statusCode) {
  res.status(staticRouterContext.statusCode)
}

    Hinweis: ich denke, dass die Testungen sind ein bisschen wackelig, weil die StaticRouterContext nicht die statusCode prop von der StaticContext - Schnittstelle. Wahrscheinlich ein Fehler in den Testungen. Dies funktioniert genauso gut, obwohl.

    InformationsquelleAutor John Leidegren
Schreibe einen Kommentar