https://github.com/mdxprograms/pagify-it
Add routing to your React app in one minute.
https://github.com/mdxprograms/pagify-it
Last synced: 7 months ago
JSON representation
Add routing to your React app in one minute.
- Host: GitHub
- URL: https://github.com/mdxprograms/pagify-it
- Owner: mdxprograms
- Created: 2018-02-10T18:15:34.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-22T14:04:42.000Z (about 8 years ago)
- Last Synced: 2025-05-08T05:33:01.861Z (11 months ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# pagify-it
# Installation
`yarn add page pagify-it`
# Usage
```javascript
import Router, { Link, navigate, redirect } from 'pagify-it';
import Root from './root';
const Foo = () => null;
const Bar = () => null;
const routes = {
'/': Root,
'/foo': Foo,
'/bar/:id': Bar,
'*': () =>
404
};
const App = () => ; // you can pass an `opts` prop too
// helpers:
// use to display a link
// methods available:
// navigate('/posts'), to navigate to a certain path
// redirect('/login'), to redirect to a certain path
// context: each rendered route will have a `ctx` prop with some metadata
```
# Documentation
See [Page.js](https://visionmedia.github.io/page.js/). This package is meant for small projects and for quick prototyping, consider something more sophisticated if you intend to build a larger product.
# Example
```javascript
import React from 'react';
import { render } from 'react-dom';
import Router, { Link } from 'pagify-it';
const Root = () => (
Root
Posts
);
const Posts = () => (
Posts
Post #1
Post #2
Post #3
New post
Back to root
);
const New = () => (
New post
Back to posts
);
const Post = props => (
Post #{props.ctx.params.id}
Back to posts
);
const styles = {
container: { display: 'flex', flexDirection: 'column' }
};
const routes = {
'/': Root,
'/posts': Posts,
'/posts/new': New,
'/posts/:id': Post,
'*': () =>
404
};
const App = () => ;
render(, document.getElementById('root'));
```