Link 在 React Route v4 中呈现第一个部分匹配

Question

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

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

到

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

它可以 link 到 DetailsComponent.I 不知道为什么以及如何修复它？

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

发生这种情况是因为

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

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

来自Documentation:

精确：布尔值

如果为真，则仅当路径与 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>

Link 在 React Route v4 中呈现第一个部分匹配

Link renders the first partial match in React Route v4

javascript

reactjs

react-router-v4