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.
react-router
4m1r
quelle
quelle
Antworten:
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)
Wenn Sie eine 404-Seite anzeigen möchten, aber die URL ändern möchten (Gleiche Funktionalität wie DefaultRoute)
Beispiel mit mehreren Ebenen:
Für React-Router 4 und 5
Behalte den Weg
Auf eine andere Route umleiten (URL ändern)
Die Reihenfolge ist wichtig!
quelle
<Redirect from='*' to='/home' />
in dieser Syntax:const routes = { component: Main, childRoutes: [ { path: '/', component: Home }, ], indexRoute: { component: Main, }, };
<Route render={(props)=> <MyComponent myProp={someVar} {...props} />} />
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:
quelle
path="*"
die NotFound-Route aufgenommen werden. Durch das Weglassen stimmtpath
die Route immer überein.path
für unbekannte Routen völligMit 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:
quelle
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)
Wann zu verwenden
exact
Ohne genaue:
Mit genau:
Wenn Sie nun Routing-Parameter akzeptieren und diese sich als falsch herausstellen, können Sie sie in der Zielkomponente selbst verarbeiten. z.B)
Jetzt in ProfilePage.js
Für weitere Details können Sie diesen Code durchgehen:
App.js.
ProfilePage.js
quelle
Gemäß der Dokumentation , die Strecke wurde , auch wenn die Ressource nicht gefunden wurde.
Sie können also jederzeit eine Zeile im
Router.run()
Vorher hinzufügenReact.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.quelle
<Route path="*" to="/dest" />
oder<Redirect from="*" to="/dest" />
als letzteIch 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:
hoffentlich hilft das!
quelle