Wie verhindert man, dass beide Routen in react-router v4 übereinstimmen?

Question

Wenn der Pfad /posts/new ist, und beide Komponenten PostsNewPostsShow unten wiedergegeben werden, und die :id angepaßt ist, mit id das Wort new statt einer Zahl ist:

ReactDOM.render(
    (
    <Provider store={createStoreWithMiddleware(reducers)}> 
     <Router> 
     <App> 
      <Route exact={true} path="/" component={PostsIndex} /> 
      <Route path="/posts/new" component={PostsNew} /> 
      <Route path="/posts/:id" component={PostsShow} /> 
     </App> 
     </Router> 
    </Provider> 
), 
    document.querySelector('#root') 
); 

In App.js:

<div> 
    <h1>An awesome App</h1> 
     {this.props.children} 
    </div> 

Wie kann /posts/new nicht zweimal gefunden werden?

Answer 1

Wir nennen dies "mehrdeutige Routen" und es gibt ein Beispiel auf unserer Website here.

Die Switch-Komponente sollte das lösen.

ReactDOM.render(
    (
    <Provider store={createStoreWithMiddleware(reducers)}> 
     <Router> 
     <App> 
      <Switch> 
      <Route exact={true} path="/" component={PostsIndex} /> 
      <Route path="/posts/new" component={PostsNew} /> 
      <Route path="/posts/:id" component={PostsShow} /> 
      </Switch> 
     </App> 
     </Router> 
    </Provider> 
), 
    document.querySelector('#root') 
);