├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── pico-router.js └── tests ├── link.test.js ├── router.test.js ├── test.client.jsx └── test.server.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.log 2 | build 3 | node_modules 4 | config/local.json -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🔀 pico-router 2 | An incredibly tiny React router for isomorphic apps. **Under 100 lines of code** 3 | 4 | [![NPM](https://nodei.co/npm/pico-router.png)](https://nodei.co/npm/pico-router/) 5 | 6 | *Goal* : pico-router was made to quickly bootstrap your project with a easy to understand and agnostic implementation of an isomorphic React router. 7 | If you need to make modifications or add features, it's easy to understand what's happening under the hood and make tweaks. 8 | As your project grows, it's easy to swap out to another more full-featured router implementation. 9 | 10 | **Features** 11 | 12 | * **Under 100 lines of code** 13 | * Very easy route -> function mapping 14 | * Uses [url-pattern](https://www.npmjs.com/package/url-pattern)-style url matching 15 | * Works on both client and server for server-side rendering 16 | * Uses history pushstate for instant page transitions 17 | * Included Link component (anchor tag replacement) to use history pushstate 18 | 19 | **Anti-Features** (features removed to reduce complexity) 20 | * No built-in redirects 21 | * If pushstate isn't supported it *does not* fall back to hash fragments. Falls back to standard anchor tag behaviour. 22 | 23 | 24 | 25 | ### Example main.jsx 26 | ```js 27 | const React = require('react'); 28 | const {CreateRouter, Link} = require('pico-router'); 29 | 30 | const UserPage = require('./user.jsx'); 31 | const HomePage = require('./home.jsx'); 32 | const SearchPage = require('./search.jsx'); 33 | 34 | const Router = CreateRouter({ 35 | '/' : , 36 | '/search' : ({args, query})=> , 37 | '/user/:id' : ({args})=>{ 38 | return 39 | } 40 | }); 41 | 42 | function Main({url = '/'}){ 43 | return

44 | 48 | 49 |

50 | } 51 | ``` 52 | 53 | ### `pico-router.CreateRouter(routeMap, [opts])` 54 | 55 | `routeMap` is a key-value object where the keys are [url-pattern](https://www.npmjs.com/package/url-pattern)-style 56 | routes and the values are either React components or functions that return React components. 57 | 58 | Returns a React component that will render to one of the passed in components in the current url matches any of the keys. Once mounted, the router component will update itself and re-render whenever the `history.pushState` changes. 59 | 60 | ```js 61 | const Router = CreateRouter({ 62 | '/' : , 63 | '/search' : ({args, query})=> , 64 | '/user/:id' : ({args})=>{ 65 | return 66 | } 67 | }); 68 | 69 | //... 70 | 71 | return

72 | 73 |

74 | }); 75 | 76 | ``` 77 | 78 | Functions passed in the `routeMap` will be passed `args`, `query`, `hash`, and `url` as parameters. `args` and `query` are objects; `hash` and `url` is a string. 79 | 80 | ```js 81 | //url -> '/users/fred/details?q=adv#main' 82 | '/users/:id/:page' : function({args, query, hash, url}){ 83 | //args -> {id : 'fred', page : 'details'} 84 | //query -> {q : 'adv'} 85 | //hash -> '#main' 86 | //url -> '/users/fred/details?q=adv#main' 87 | } 88 | ``` 89 | 90 | #### `opts` 91 | ```js 92 | { 93 | prefix : '' // Will add this string at the front of each url 94 | } 95 | ``` 96 | 97 | 98 | 99 | ### `` 100 | Creating a router will return a React component that is used in your `render` function. The router can take 4 additional props: 101 | 102 | ```js 103 | 104 | const Router = CreateRouter({ 105 | '/' : ()=>

Oh hello

106 | }); 107 | 108 | function MainComponent(){ 109 | return 114 | } 115 | ``` 116 | 117 | #### Nested Routers 118 | It's also possible to nest routers together 119 | 120 | ```js 121 | const Subrouter = CreateRouter({ 122 | '/sub/test' :

I am a sub page

123 | }) 124 | 125 | const MainRouter = CreateRouter({ 126 | '/' :

Oh hello

sub router

; 12 | }, 13 | //'*' : ()=>'fallback' 14 | }, { name : 'main', index : 0 }); 15 | 16 | const SubRouter = CreateRouter({ 17 | '' : ()=>'sub', 18 | '/nest' : ()=>'sub-nest', 19 | //'*' : ()=>'sub-fallback' 20 | }, { prefix : '/sub', name : 'sub', index : 1 }); 21 | 22 | const Component = (props)=>{ 23 | //setServerSideUrl(props.url); 24 | console.log(props); 25 | return

26 | root
27 | /test
28 | /sub
29 | /sub/nest
30 | 31 | oops
32 | sub-oops
33 | 34 | external
35 | 36 |

37 | 38 | 39 | 40 |

41 | 42 | 43 | 44 |

45 | 46 | 47 |

${ReactDOMServer.renderToString(React.createElement(eval(`module=undefined;${bundle};global.Root`), props))}

14 | 15 | 16 | `; 17 | }; 18 | const build = async (componentPath, props = {})=>render(getBundler(componentPath, props), props); 19 | 20 | 21 | 22 | const express = require('express'); 23 | const app = express(); 24 | 25 | app.all('*', (req, res)=>{ 26 | if(req.url == '/favicon.ico') return res.send('ok'); 27 | build('./tests/test.client.jsx', {url : req.url}).then((code)=>{ 28 | return res.send(code); 29 | }); 30 | }); 31 | app.listen(8000); 32 | console.log('Pico-router test server running at localhost:8000'); 33 | --------------------------------------------------------------------------------