Link stellt die erste Teilübereinstimmung in React Route v4 dar.

Question

Mit den folgenden Codes wurde nur mit ListComponent verknüpft, wenn ich mit DetailsComponent verknüpfen möchte. Wenn Änderung

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

zu

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

es DetailsComponent.I verknüpfen können nicht, warum und wie man es beheben?

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

Das geschieht, weil

1. Du Verwendung von Switch-Komponente zu machen, der die erste Strecke macht, die übereinstimmt, was natürlich richtig, was zu tun ist.
2. Sie haben Ihre Liste Route wie 'data/tower/list' und Ihre Route Details wie 'data/tower/list/item', aber Router sucht nicht nach einer vollständigen Übereinstimmung, in Ihrem Fall 'data/tower/list' passt (obwohl nicht vollständig, aber mit dem ersten Teil) die Details Route und damit auch wenn Sie versuchen, zu Details zu routen, führt es zu List-Komponente.

Die Lösung besteht darin, das Attribut exact für die Route zu verwenden.

Vom Documentation:

genau: bool

Wenn true, wird nur übereinstimmen, wenn der Weg genau die location.pathname übereinstimmt.

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

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

Ändern Sie den Code zu

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