JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="title">Hello Loder</div>
  <div class="wrapper"><div id="data"></div></div>
</div>

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/loderWithRoute.umd.js"></script>

SCSS

.container {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}
.title {
  font-size: 40px;
  text-align: center;
}

.wrapper {
  text-align: center;
}
.typed {
  display: inline-block;
}

Babel + JSX

location.hash = '#/post/233'

// 注册API
loder('fetchPost', params => Promise.resolve(`Data Of Post ${params.id}`))

// 配置使用hash路由
loder.config({ isHashRouter: true })

// 注册路由
loder.route('/post/:id', params => {
	// 注册资源 —— 首屏数据	
	loder('data', () => {
  	return loder.echo('fetchPost', params)
  })
})

loder.echo('data').then(res => {
	document.getElementById('data').innerHTML = `Fetched: ${res}`
})