NotFound Route immer mit statischen Routen angezeigt - [React Router 4]

Question

Wie kann ich eine NotFound-Komponente mit React Router 4 und statische Routen definieren?

Ich verwende die next Version von react-router-redux. Also, in meinem Klienten:

export default function appRoutes(history) { 
    return (
    <ConnectedRouter history={history}> 
     <div> 
     {routes.map((route, key) => (
      <Route key={key} {...route} /> 
     ))} 
     </div> 
    </ConnectedRouter> 
); 
} 

und Routen sind:

export const routes = [ 
    { 
    path: '/', 
    component: App 
    }, 
    { 
    path: '/:lang/chat', 
    component: Chat 
    }, 
    { 
    path: '/:lang', 
    component: Listing 
    }, 
    ... 
    { 
    path: '*', 
    component: NotFound, 
    status: 404 
    }, 
]; 

Mit diesem Ansatz wird die Komponente nicht immer gefunden wird, zeigt zusammen mit der angepassten Route.

Ich habe gelesen, dass anstelle der oben beschriebenen appRoutes Methode, mit einem div, muss ich Switch verwenden. Aber mit diesem Ansatz stimmen die Routen nie überein.

EDIT

I angezeigt werden soll, zum Beispiel, App-Komponente und Listing Komponente zugleich aber die NotFound anzeigt auch.

Also, was mache ich falsch?

Answer 1

Ich fand eine Lösung, die für mich funktioniert. Ich habe von statischen Routen die App Komponente entfernt und vorher platziert und dann Switch verwendet, um nur eine Route zu rendern.

export default function appRoutes(history) { 
    return (
    <ConnectedRouter history={history}> 
     <div> 
     <Route path='/' component={App} /> 
     <Switch> 
      {routes.map((route, key) => (
      <Route key={key} {...route} /> 
     ))} 
     </Switch> 
     </div> 
    </ConnectedRouter> 
); 
} 

Answer 2

Reactor Router V4 zeigt alle passenden Routen an. Wenn Sie nur eine einzige Switch-Komponente anzeigen möchten.