What is the proper ordering of routes in routes.js?

[justin-jalandoni]

I just discovered that the order matters when declaring routes. If the order is wrong, the component which is mapped to the route won't render. What is the proper order for routes? Is there documentation present? This works:

<Switch>
    <Route exact path="/">
        <App />
    </Route>
    <Route path="/persons/add">
        <PersonFormContainer action="Create" />
    </Route>
    <Route path="/persons/edit/:id">
        <PersonFormContainer action="Edit" />
    </Route>
    <Route path="/persons/:id">
        <PersonDetailsContainer />
    </Route>
    <Route path="/persons">
        <PersonsListContainer />
    </Route>
</Switch>
);

but this doesn't

<Switch>
    <Route path="/persons/edit/:id">
        <PersonFormContainer action="Edit" />
    </Route>
    <Route exact path="/">
        <App />
    </Route>
    <Route path="/persons/add">
        <PersonFormContainer action="Create" />
    </Route>

    <Route path="/persons/:id">
        <PersonDetailsContainer />
    </Route>
    <Route path="/persons">
        <PersonsListContainer />
    </Route>
</Switch>

[MeiKatz]

In RRv5 routes are matched from top to bottom: if a path matches the matching stops and the first matching route wins.

[justin-jalandoni]

Is there a specific reason the second doesn't work?

[MeiKatz]

Depends on the url you try to match. But as far as I see it, it should also match.