javascript - 链接在 React Route v4 中呈现第一个部分匹配

Question

使用下面的代码，它只在我想链接到 DetailsComponent 时链接到 ListComponent。如果改变

Details: route('data/tower/list/item'),

到

Details: route('data/tower/item'),

它可以链接到 DetailsComponent。我不知道为什么以及如何修复它？

const EnumRouter = {
    ...
    List: route('data/tower/list'),
    Details: route('data/tower/list/item'),
};

<Switch>
    ...
    //ListComponent
    <MainLayout path={EnumRouter.List} component={List} />
    //DetailsComponent
    <MainLayout path={EnumRouter.Details} component={Details} />
   ...
</Switch>

Answer 1

这是因为

1. 您正在使用 Switch 组件，它会呈现第一个匹配的路由，这当然是正确的做法。
2. 您的列表路由为'data/tower/list'，您的详细信息路由为'data/tower/list/item'，但是路由器没有寻找一个完整的匹配项，在你的情况下 'data/tower/list' 匹配(虽然不完全但与初始部分)详细信息路由，因此即使你尝试路由到详细信息，它也会路由列出组件。

解决方案是为路由使用 exact 属性。

来自 Documentation :

精确: bool 值

当为 true 时，仅当路径与 location.pathname 完全匹配时才会匹配。

**path**    **location.pathname**   **exact**   **matches?**

/one            /one/two              true         no
/one            /one/two              false        yes

将代码改为

<Switch>
    ...
    //ListComponent
    <MainLayout exact path={EnumRouter.List} component={List} />
    //DetailsComponent
    <MainLayout path={EnumRouter.Details} component={Details} />
   ...
</Switch>