鏈接呈現在反應路線v4中的第一個部分匹配

使用下面的代碼時，它只鏈接到ListComponent當我想鏈接到DetailsComponent。如果鏈接呈現在反應路線v4中的第一個部分匹配

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

到

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

改變它可以鏈接到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>

來源

2017-06-28 Cele King

這是因爲

您正在使用的開關元件，這使得相匹配，這是ofCourse做正確的事的第一條路線的。
你有你的名單路線爲'data/tower/list'和您的詳細路線爲'data/tower/list/item'，但路由器不尋找一個完整的比賽，你的情況'data/tower/list'比賽（雖然不完全，但與最初的部分）的詳細路線，因此，即使您嘗試路由到詳細信息，它將路由到列表組件。

解決的辦法是利用Route的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>

來源

2017-06-28 04:23:26

鏈接呈現在反應路線v4中的第一個部分匹配

回答

相關問題