precise update
With the help of isElementShallowEqual in react-utilities, Route can precisely update its children.
const Model = ({model, children}) => {
console.log('model update');
return <div>
<h1>modelName: {model}</h1>
{children}
</div>
});
const Detail = ({id, children}) => {
console.log('id update');
return <div>
<h1>modelid: {id}</h1>
{children}
</div>
};
const Edit = () => {
console.log('edit update');
return <div>
Edit mode.
</div>
};
const App = ()=>(<Route path='/:model' component={Model}>
<Route path=':id' component={Detail}>
<Route path='edit' component={Edit}/>
</Route>
</Route>);
When changing URL from /user/1/edit to /book/1/edit, Detail and Edit would not update since they only concern about id and edit part in URL.