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

这是因为

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

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

来自 Documentation ：

exact：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>

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

1 个答案: