React-Router: Keine Route nicht gefunden?

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

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!

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')
);

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>

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

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.

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!