halter
Simple independent JS router
Usage
First remember to install history
NPM module of your choice:
npm install history
Then set up your routes:
;;
Labeled routes
Following an similar approach of Angular UI for Angular 1.x we decided to create labeled routes for convenience, so we can build our app based on labeled routes and not on routes paths it self. For example when you create your <Link/>
in your React app instead of putting the path to go when the user click the component, you put a convenient label which will match to be the path you need, check the following example:
;;;;;
The advantages I see on this approach is that you don't need to keep track of paths itself but the route labels instead. So if you need to change a route path you'll be able to do this without worrying about looking all over through your code searching for that path.
Remember that whenever you don't name your route definitions, it'll be the route path (i.e. if you have /posts/{id:[0-9]+} with no name, the name will automatically be /posts/{id:[0-9]+}).
Listening to changes
Listening to changes on history API it's pretty simple.
const router = ; router;
Integration with React
Integration with React it's pretty straightforward. You use <RouterView routes={x} router={y} />
from react-halter
NPM module and it'll automatically create necessary routes according to the nested structure provided through routes
property. See the steps below:
- Install
react-halter
module:
npm install --save react-halter
- Set up routes:
;ReactDOM.render RouterView router= routes= /, document.getElementById'app';