UniversalRouter params, query and hash
HTML
<script src="https://npmcdn.com/[email protected]/universal-router.js"></script>
Babel + JSX
const loc = new URL('http://example.com/user/#helloworld/1/posts/2');
const route = {
path: '#helloworld/:userId/posts/:postId',
action({ path, params: { userId, postId }, query: { sort }, hash }) {
console.log(path); // => '/user/45/posts/28/?sort=first#opened'
console.log(userId); // => '45'
console.log(postId); // => '28'
console.log(sort); // => 'first'
console.log(hash); // => '#opened'
return /*...*/`
path: ${path}<br/>
userId: ${userId}<br/>
sort: ${sort}<br/>
hash: ${hash}`;
}
}
const router = new UniversalRouter(route, {
path: loc.pathname,
query: parseQuery(loc.search),
hash: loc.hash,
});
// https://github.com/kriasoft/universal-router
router.resolve('#helloworld').then(result => {
document.body.innerHTML = result
console.log(result);
})
// https://github.com/sindresorhus/query-string
function parseQuery(qstr) {
const query = {};
const a = (qstr[0] === '?' ? qstr.substr(1) : qstr).split('&');
for (let i = 0; i < a.length; i++) {
const b = a[i].split('=');
query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
}
return query;
}