btford / react-palm

Work in progress, docs forthcoming i promise
MIT License
60 stars 7 forks source link

Feat routing, history #2

Closed btford closed 7 years ago

btford commented 7 years ago

@Apercu Can you take a look at this?

These features are still missing tests and docs; need to pull them into this PR.

btford commented 7 years ago

@Apercu and I talked extensively in person. Here's what we decided on for a proper architecture for createRoute:

Route Definition API

const {handlers, routes, INITIAL_STATE, HISTORY_PUSH, LOCATION_CHANGE} = createRouter({
  post: {url: u`/user/${{uid: UID}}/${{pid: String}}`, component: ChildComponent, childRoutes: {
    paragraph: {url: u`/paragraph/${{paragraph: Number}}/ ${{word: Number}}`, component: ...}
  }},
  user: {url: '/user/:uid', component: UserComponent}
  index: {url: '/', component: IndexComponent}
});

Example route usage in <Link> in a component

// Route Usage in a component:
const MyComponent = ({routeParams, parentRoute}) => {
  // imported, fully qualified:
  const myLinkUrl = routes.post({uid: 1, pid: 2}).paragraph({paragraph: 3, word: 4});

  // using parentRoute helper, and writing our own "partially applied" route helper.
  const myWord = (word) => parentRoute.paragraph({paragraph: 2, word})
  return (<div>
    <Link to={myWord(3)}>some link!</Link>
    <Link to={myLinkUrl}>another link!</Link>
  </div>);
}