Reactive router mounts the wrong component
I am writing a React-on-Rails application (v. 5) and am facing a problem. When I am on the way accounts/:account_id/letters/new
, React-Router mounts EmailShowComponent
when I want it to mount EmailSendComponent
.
This is my app.js file:
<Router history={browserHistory}>
<Route path="/accounts/:id" component={AccountShowContainer} />
<Route path="/accounts/:account_id/letters/:id" component={EmailShowComponent} />
<Route path="/accounts/:account_id/letters/new" component={EmailSendComponent} />
</Router>
This is my main.js file:
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
$(function(){
ReactDOM.render(
<App />,
document.getElementById('app')
)
});
And I have placed tags "<div id="app">"
inside each of the respective html pages that generate these paths for the router.
Any idea what could be causing this?
source to share
The problem is that the path /accounts/:account_id/letters/new
also satisfies the path /accounts/:account_id/letters/:id
. The difference id
is equal "new"
.
To fix this, simply reorder your routes:
<Router history={browserHistory}>
<Route path="/accounts/:id" component={AccountShowContainer} />
<Route path="/accounts/:account_id/letters/new" component={EmailSendComponent} />
<Route path="/accounts/:account_id/letters/:id" component={EmailShowComponent} />
</Router>
For more information, check out the Precedence section from the official docs:
Finally, the routing algorithm tries to match routes in the order they are determined from top to bottom. So, when you have two marriage paths, you must be sure that the first does not correspond to all the possible ones
path
that can be matched by a later brother. For example, don't do this:<Route path="/comments" ... /> <Redirect from="/comments" ... />
source to share