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.

results matching ""

    No results matching ""