如何防止两个路由在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

我们称之为"暧昧路线",并有对我们网站的例子在这里.

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