如何防止兩個路由在react-router v4中匹配？

Question

如果路徑是/posts/new，兩種組分PostsNew和下面PostsShow將呈現，並且:id匹配時，與id是代替一個數字字new：

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

在App.js：

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

/posts/new如何不能匹配兩次？

Answer 1

我們稱之爲「模棱兩可的路線」，在我們的網站here上有一個例子。

Switch組件應該解決這個問題。

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