Question

我有一个案例，我想在表单上设置一个url-scheme

/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-component和Detail Component都会呈现。

我的解决方法是将Details-component包装成如下：

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

但这对我来说似乎有些迟钝。是否可以仅使用路由设置此类行为？我知道这是在Flask中完成的工作，但是根据我从rr4文档中收集的内容，这里的路由概念有点不同（意味着可以同时渲染多个路由）。

Answer 1

在Twitter上，我被指向https://reacttraining.com/react-router/web/example/ambiguous-matches

的方向

Switch正是我所寻找的：

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

因为看起来你可以在路径部分中使用正则表达式，所以你不能使用

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

或者什么......（我的正则表达在这一点上并不令人敬畏）

React Router 4：或者路由

2 个答案: