反应路由器4:要么-要么路由

Question

我有一个案子，我想在表格上建立一个网址计划。

/items/ <- list of items
/items/1 <- item1
/items/2 <- item2
...
/items/2 <- itemn
/items/new <- create item

根据我对其他路由框架的解释，我尝试了以下方法：

function (props) {
    var match = props.match;
    return (
        <div>
            <Route path={ `${match.url}/new` }
                   component={ Create } />
            <Route path={ `${match.url}/:id` }
                   component={ Details } />
            <Route exact
                   path={ match.url }
                   component={ List } />
        </div>
    );
}

但是，当我导航到/items/new时，Create组件和Detail组件都呈现出来。

我的解决办法是包装细节组件，如下所示：

function DetailContainer (props) {
    if (props.match.params.id === 'new') {
      return null;
    }
    return (
      <Detail {...props} />
    );
}

但对我来说，这似乎有点刻薄。是否可以单靠路线来建立这种行为呢？我知道这就是在rr4中所做的事情，但是根据我从文档中收集到的信息，这里的路由概念有点不同(这意味着几条路由可以一次呈现)。

Answer 1

在推特上，我被指向了https://reacttraining.com/react-router/web/example/ambiguous-matches的方向

我要找的是开关：

function (props) {
    var match = props.match;
    return (
        <div>
            <Switch>
                <Route path={ `${match.url}/new` }
                       component={ Create } />
                <Route path={ `${match.url}/:id` }
                       component={ Details } />
            </Switch>
            <Route exact
                   path={ match.url }
                   component={ List } />
        </div>
    );
}

Answer 2

路由器的路径部分似乎是基于以下模块：https://www.npmjs.com/package/path-to-regexp。

因为看起来您可以在路径部分中使用regex-表达式，所以可以不使用

path={ `${match.url}/(:id?!new)` }

或者什么..。(我的大王在这一点上并不了不起)