reactjs - 如何防止两条路由在 react-router v4 中匹配？

Question

如果路径是，则将呈现/posts/new组件PostsNew及其以下组件，并且匹配，并且是单词而不是数字：PostsShow:ididnew

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