Pengwyn Router
A 1KB router that uses a routes object to determine the components to display instead of JSX. This router also automatically hooks up to redux if the dispatch function is available to it.
Example
;;;; const path = locationpathname; const routes = route: '/' component: Home route: '/post/:id' component: Post route: '*' component: NotFound; const App = <AppWrapper> <Router ...path routes passedProps: props /> </AppWrapper>; ;
Redux Integration
If you use redux in your app ensure that the Router has the dispatch function within its passedProps
and it will automatically start firing actions on route changes.
An example of the action dispatched by the router is shown below:
type: 'LOCATION_CHANGE' data: route: '/'
Using the action you can build a reducer to grab the current route location and add it to your apps state.
Route Matching
When the Router is going through the routes to find a match, it does so in order of first to last. If you have the same route in two places, the first in the routes array will be the match.
Static route - /about-us
Dynamic segment - /post/:id
Match anything - *
Match any segment - /author/*/comments
Optional segment - /tag/(:tag)
Note If you wish to use an optional segment, it must be at the end of a route.