我有两条路由,一个是详情,一个是新建,但是好像会冲突

#1
 <Route path="/posts/new" component={NewPost} />
 <Route path="/posts/:id" component={PostDetail} />

但是当我输入/posts/new的时候,下面的路由被同时触发了,请问怎么解决

#2

路由匹配是按照代码从上往下匹配。你帖子里这种写法是不会触发/posts/:id的

#3
<Switch>
.....
</Switch>
#4
 <Router>
        <Layout>
          <Header>
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={['home']}
              style={{ lineHeight: '64px' }}
            >
              <Menu.Item key="home">
                <Link to={'/'}>首页</Link>
              </Menu.Item>
              <Menu.Item key="new_post" >
                <Link to={'/posts/new'}>新建文章</Link>
              </Menu.Item>
            </Menu>
          </Header>
          <Content>
            <Route exact={true} path="/" component={PostList} />
            <Route exact={true} path="/posts" component={PostList} />
            <Route path="/posts/new" component={NewPost} />
            <Route path="/posts/:id" component={PostDetail} />
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2016 Created by Ant UED
          </Footer>
        </Layout>
      </Router>

我现在页面里面确实是同时触发了两条路由