FormidableLabs / redux-little-router

A tiny router for Redux that lets the URL do the talking.
MIT License
1.04k stars 114 forks source link

Other routing declaration examples #244

Open drKnoxy opened 6 years ago

drKnoxy commented 6 years ago

I haven't found Fragment to be a good solution for my use cases because it results in needing to wrap route declarations multiple times just to get a 1-to-1 mapping ie.

/ -> home
/room -> room
/room/:id -> room_details

I've rolled something like this for every project i've used rlr on. Would it be helpful if I submitted a PR to add the components, or just document them as a possible solution?

ie.


const routes = {
  '/': { id: 'HOME' },
  '/room': { id: 'ROOM' },
};

const ForRoute = connect(state => ({ routeID: state.router.result.id }))(function(props){
  return props.id === props.routeID ? props.children : null;
});
const ForNoMatch = connect(state=> ({ isMiss: state.router.result.id === undefined })(function(props){
  return isMiss && props.children;
});

function App(props){
  return (
    <div>
      <ForRoute id="HOME">
        <h2>Home</h2>
      </ForRoute>
      <ForRoute id="ROOM">
        <h2>Room</h2>
      </ForRoute>
      <ForNoMatch>
        <h2>Miss</h2>
      </ForNoMatch>
    </div>
  )
};