使用react-router按路径顺序设置优先级

Question

My routing looks like this

<Route path="account" component={Page1}>
    <Route path="new" component={Page2}/>  
    <Route path="(:userId)" component={Page1}/>
</Route>

Whenever I go to account/new it defaults to the (:userId) path and directs me to Page1 treating 'new' as the optional parameter. How can I make it default to Page2 ?

I am using V3 of react-router

Answer 1

It is going to Page1 because account needs to be an exact path. Since it isn't, when you go to account/new it will show the component for account . Try this:

<Route exact path="/account" component={Page1}>
    <Route path="/new" component={Page2}/>  
    <Route path="/(:userId)" component={Page1}/>
</Route>