React-Router: Keine Route nicht gefunden?

129

Folgendes berücksichtigen:

var AppRoutes = [
    <Route handler={App} someProp="defaultProp">
        <Route path="/" handler={Page} />
    </Route>,

    <Route  handler={App} someProp="defaultProp">
        <Route path="/" handler={Header} >
            <Route path="/withheader" handler={Page} />
        </Route>
    </Route>,

    <Route handler={App} someProp="defaultProp">
        <Route path=":area" handler={Area} />
        <Route path=":area/:city" handler={Area} />
        <Route path=":area/:city/:locale" handler={Area} />
        <Route path=":area/:city/:locale/:type" handler={Area} />
    </Route>
];

Ich habe eine App-Vorlage, eine HeaderTemplate und einen parametrisierten Satz von Routen mit demselben Handler (innerhalb der App-Vorlage). Ich möchte 404 Routen bedienen können, wenn etwas nicht gefunden wird. Beispielsweise sollte / CA / SanFrancisco von Area gefunden und verarbeitet werden, während / SanFranciscoz 404 sein sollte.

So teste ich schnell die Routen.

['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){
    Router.run(AppRoutes, path, function(Handler, state){
        var output = React.renderToString(<Handler/>);
        console.log(output, '\n');
    });
});

Das Problem ist, dass / SanFranciscoz immer von der Bereichsseite behandelt wird, aber ich möchte, dass es 404 ist. Wenn ich der ersten Routenkonfiguration eine NotFoundRoute hinzufüge, werden alle Bereichsseiten 404 angezeigt.

<Route handler={App} someProp="defaultProp">
    <Route path="/" handler={Page} />
    <NotFoundRoute handler={NotFound} />
</Route>,

Was mache ich falsch?

Hier ist ein Kern, der heruntergeladen und experimentiert werden kann.

https://gist.github.com/adjavaherian/aa48e78279acddc25315

4m1r
quelle
Lesen Sie diesen Artikel , damit Sie später auf diese Frage zurückgreifen können, abgesehen von der richtigen Antwort unten . Ich bin früher darauf gestoßen und ich denke, diese Person erklärt es perfekt.
Dimitris Damilos

Antworten:

245

DefaultRoute und NotFoundRoute wurden in React-Router 1.0.0 entfernt.

Ich möchte betonen, dass die Standardroute mit dem Sternchen die letzte in der aktuellen Hierarchieebene sein muss, damit sie funktioniert. Andernfalls werden alle anderen Routen überschrieben, die danach in der Baumstruktur angezeigt werden, da es die erste ist und mit jedem Pfad übereinstimmt.

Für React-Router 1, 2 und 3

Wenn Sie einen 404 anzeigen und den Pfad beibehalten möchten (gleiche Funktionalität wie NotFoundRoute)

<Route path='*' exact={true} component={My404Component} />

Wenn Sie eine 404-Seite anzeigen möchten, aber die URL ändern möchten (Gleiche Funktionalität wie DefaultRoute)

<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />

Beispiel mit mehreren Ebenen:

<Route path='/' component={Layout} />
    <IndexRoute component={MyComponent} />
    <Route path='/users' component={MyComponent}>
        <Route path='user/:id' component={MyComponent} />
        <Route path='*' component={UsersNotFound} />
    </Route>
    <Route path='/settings' component={MyComponent} />
    <Route path='*' exact={true} component={GenericNotFound} />
</Route>

Für React-Router 4 und 5

Behalte den Weg

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

Auf eine andere Route umleiten (URL ändern)

<Switch>
    <Route path="/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

Die Reihenfolge ist wichtig!

Janne Annala
quelle
Wenn Sie eine Redux-App haben, wie machen Sie das: <Redirect from='*' to='/home' />in dieser Syntax:const routes = { component: Main, childRoutes: [ { path: '/', component: Home }, ], indexRoute: { component: Main, }, };
Tatsu
1
Wenn Sie Requisiten für den 404-Compontent einstellen möchten, verwenden Sie diesen Code:<Route render={(props)=> <MyComponent myProp={someVar} {...props} />} />
Marco Weber
Was ist mit einer 500-Seite? Wie eine Seite, die geladen werden soll, aber die API gibt einen Fehler aus. Wie kann ich dies anstelle der Seite anzeigen, die beim Beibehalten der Route fehlgeschlagen ist?
PixMach
<Redirect to = "/ 404" /> bewirkt, dass die maximale Aktualisierungstiefe auf dem React-Router-Dom 5.0.0 überschritten wird. Selbst wenn Seite 404 beendet wird, wird umgeleitet.
MiguelSlv
4
Ich mag es nicht, eine Weiterleitung zu verwenden, weil sie die problematische URL vor dem Benutzer verbirgt. Es ist auch erforderlich, zweimal zurückzuschlagen, um zur vorherigen Seite zurückzukehren.
SDGFSDH
39

In neueren Versionen von React-Router möchten Sie die Routen in einen Switch einschließen, der nur die erste übereinstimmende Komponente rendert. Andernfalls würden mehrere Komponenten gerendert.

Beispielsweise:

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  browserHistory,
  Switch
} from 'react-router-dom';

import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';

const Root = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/welcome" component={Welcome}/>
      <Route component={NotFound}/>
    </Switch>
  </Router>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);
Metakermit
quelle
12
Sie müssen nicht in path="*"die NotFound-Route aufgenommen werden. Durch das Weglassen stimmt pathdie Route immer überein.
Chipit24
1
Für Leute, die zu spät kommen, ist @ chipit24 richtig, um Verwirrung zu vermeiden, lassen Sie einfach die pathfür unbekannte Routen völlig
weg
14

Mit der neuen Version von React Router (jetzt mit 2.0.1) können Sie ein Sternchen als Pfad verwenden, um alle "anderen Pfade" zu routen.

So würde es aussehen:

<Route route="/" component={App}>
    <Route path=":area" component={Area}>
        <Route path=":city" component={City} />
        <Route path=":more-stuff" component={MoreStuff} />    
    </Route>
    <Route path="*" component={NotFoundRoute} />
</Route>
Dejakob
quelle
10

Diese Antwort ist für React-Router-4. Sie können alle Routen in den Switch-Block einschließen, der genau wie der Switch-Case-Ausdruck funktioniert, und die Komponente mit der ersten übereinstimmenden Route rendern. z.B)

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

Wann zu verwenden exact

Ohne genaue:

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

Mit genau:

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

Wenn Sie nun Routing-Parameter akzeptieren und diese sich als falsch herausstellen, können Sie sie in der Zielkomponente selbst verarbeiten. z.B)

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

Jetzt in ProfilePage.js

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

Für weitere Details können Sie diesen Code durchgehen:

App.js.

ProfilePage.js

Pransh Tiwari
quelle
6

Gemäß der Dokumentation , die Strecke wurde , auch wenn die Ressource nicht gefunden wurde.

Hinweis : Dies ist nicht vorgesehen, wenn eine Ressource nicht gefunden wird. Es gibt einen Unterschied zwischen dem Router, der keinen übereinstimmenden Pfad findet, und einer gültigen URL, die dazu führt, dass eine Ressource nicht gefunden wird. Die URL-Kurse / 123 sind eine gültige URL und führen zu einer übereinstimmenden Route. Daher wurde sie in Bezug auf das Routing "gefunden". Wenn wir dann einige Daten abrufen und feststellen, dass der Kurs 123 nicht existiert, möchten wir nicht zu einer neuen Route übergehen. Genau wie auf dem Server stellen Sie die URL bereit, rendern jedoch eine andere Benutzeroberfläche (und verwenden einen anderen Statuscode). Sie sollten niemals versuchen, zu einer NotFoundRoute zu wechseln.

Sie können also jederzeit eine Zeile im Router.run()Vorher hinzufügen React.render(), um zu überprüfen, ob die Ressource gültig ist. HandlerÜbergeben Sie einfach eine Requisite an die Komponente oder überschreiben Sie die Komponente mit einer benutzerdefinierten, um die NotFound-Ansicht anzuzeigen.

Brad B.
quelle
danke @brad, du hast recht, du musst das mit der Komponente erledigen und / oder den Handler überschreiben, bevor router.run
4m1r
3
NotFound wurde veraltet github.com/reactjs/react-router/releases/tag/v1.0.0 , jetzt verwenden <Route path="*" to="/dest" />oder <Redirect from="*" to="/dest" />als letzte
Subroute
5

Ich habe mir Ihr Beispiel nur kurz angesehen, aber wenn ich es richtig verstanden habe, versuchen Sie, dynamischen Segmenten 404 Routen hinzuzufügen. Ich hatte vor ein paar Tagen das gleiche Problem und fand # 458 und # 1103 und endete mit einem handgemachten Check innerhalb der Renderfunktion:

if (!place) return <NotFound />;

hoffentlich hilft das!

Jörn
quelle
danke @jorn, ich denke du hast recht, dies scheint nur von der Komponentenebene aus adressierbar zu sein
4m1r