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

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

1 个答案: