Question

我这样做是这样的：

<Route exact path = {`$ {match.url} /`} component = {List} />
<Route exact path = {`$ {match.url} /: id`} component = {View}/>
<Route exact path = {`$ {match.url} / new`} component = {New} />

但是当我转到具有 id 的页面时，我看到了两个部分而且很明显为什么，因为它认为单词 new 为 id

如何正确处理？

Answer 1

是的，它认为单词new为id。由于路径

<Route exact path={`${match.url}/:id`} component={View} />

表明在id占位符处期望有一个动态值。由于id只是一个占位符，使用new作为路由参数也将满足条件。

因此，您可以将Routes组件与Switch组件一起包装，最后将Route与id占位符保持在一起。由于Switch组件仅呈现与该路径匹配的第一个子对象，因此使用View时/new组件将不会显示。

<Switch>
   <Route path={`${match.path}/`} component={List} />
   <Route exact path={`${match.url}/new`} component={New} />
   // place route with "id" at last
   <Route exact path={`${match.url}/:id`} component={View} />
</Switch>

如何正确建立id和new的路由？

1 个答案: