tridoron
v0.3.3
Published
Router library for React
Downloads
11
Readme
Tridoron
Tridoron is a routing library for React.
Usage
Define route
Define routing by setting path, view and handler as argument of route method.
import { route } from 'tridoron';
/**
* route
* @param {String} path
* @param {React.Component} view
* @param {(args: Array<string>, query: any) => Promise<*>} handler (optional)
*/
const routes = [
route('/', Index),
route('/todos', TodoList, todosListPageHandler),
route('/todos/:id', TodoDetail, todoDetailPageHandler)
];
Create Router
Configure the engine (History or Hash) and list of routes to create an instance of the router.
import { Router, History } from 'tridoron';
const router = new Router(History, routes);
router.start();
Render the View
The render method of the main component returns <router.content>.
import React from 'react';
import { render } from 'react-dom';
class SomeComponent extends React.Component {
render() {
const { router } = this.props;
return (
<router.content />
);
}
}
render(
<SomeComponent router={router} />,
document.getElementById('app')
);
Example
import React from 'react';
import { render } from 'react-dom';
import { Router, History, route, Link } from 'tridoron';
function Index(props) {
return (
<div>
<h1>Index</h1>
<Link href="/todos">Todos</Link>
</div>
);
}
function TodoList(props) {
const rows = props.todos.map(todo => {
return <li key={todo.id}><Link href={`/todos/${todo.id}`}>{todo.title}</Link></li>;
});
return (
<div>
<Link href="/">Index</Link>
<h1>Todos</h1>
<ul>{rows}</ul>
</div>
);
}
function TodoDetail(props) {
const { theTodo } = props;
return (
<div>
<Link href="/todos">Todos</Link>
<h1>{theTodo.title}</h1>
</div>
);
}
class App extends React.Component {
constructor(props) {
super(props);
const { router, store } = props;
this.state = store.getState();
router.listen(this.handleChangeHref.bind(this));
store.onChange(this.handleChangeStore.bind(this));
}
render() {
const { router } = this.props;
// render view of the current route
return <router.content {...this.state} />;
}
handleChangeHref(href) {
console.log(`current href: ${href}`);
// redraw
this.setState(store.getState());
}
handleChangeStore(store) {
this.setState(store.getState());
}
}
const store = {
_state: {
todos: [],
theTodo: {}
},
set(key, value) {
this._state[key] = value;
this._handler(this);
},
onChange(handler) {
this._handler = handler;
},
getState() {
return this._state;
}
}
// define routes
const routes = [
route('/', Index),
route('/todos', TodoList, () => {
fetch('/todos.json')
.then(r => r.json())
.then(json => {
store.set('todos', json.todos);
});
}),
route('/todos/:id', TodoDetail, ([id]) => {
fetch(`/todo_${id}.json`)
.then(r => r.json())
.then(json => {
store.set('theTodo', json);
});
})
];
// router initialize, set up with History API
const router = new Router(History, routes);
// router launch.
router.start();
render(
<App router={router} store={store} />,
document.getElementById('app')
);