[PReact] Handle Simple Routing with preact-router
Some applications only need a very minimal routing solution. This lesson will cover a practical example showing the router in use. We’ll build a simple search feature that accepts user input and then calls the github API. We’ll see how to access route parameters, how to manually & automatically navigate around, and finally how to handle un-matched path. https://github.com/developit/preact-router
Install:
npm install --save preact-router
Define routers:
import {h} from 'preact';
import { Router } from 'preact-router';
import Profile from './Profile';
import Home from './Home';
import Error from './Error'; export default function App() {
return (
<Router>
<Home path="/" />
<Profile path="/profile/:user"/>
<Error default/>
</Router>
);
}
Defailt Error router:
import {h} from 'preact';
import {route} from 'preact-router'; const back = (e) => {
route('/');
}; export default Error = () => (
<div>
<h2>Error!</h2>
<button onClick={e => back(e)}>Home</button>
</div>
);
Home: preact call route() function to navigate between components.
import { h } from 'preact';
import { route } from 'preact-router'; function search(query) {
route(`/profile/${encodeURIComponent(query)}`);
} export default function Home() {
return (
<section>
<p>Enter a Github Username</p>
<input type="search"
placeholder="username"
onSearch={e => search(e.target.value)}
/>
</section>
);
}
Profile.js: Stateful component, fetching data:
import {h, Component} from 'preact';
import User from './User'; const config = {
url: 'https://api.github.com/users'
}; export default class Profile extends Component {
constructor(props) {
super(props); this.state = {
loading: true,
user: null
};
} componentDidMount() {
fetch(`${config.url}/${this.props.user}`)
.then(resp => resp.json())
.then(user => {
this.setState({
user,
loading: false
});
})
.catch(err => console.error(err));
} render({user: username}, {loading, user: userState}) {
return (
<div class="app">
{loading
? <p>Fetching {username}'s profile</p>
: <User image={userState.avatar_url}
name={userState.name} />
}
</div>
);
}
}
[PReact] Handle Simple Routing with preact-router的更多相关文章
- Preact(React)核心原理详解
原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...
- Routing Manager for WCF4 z
http://www.codeproject.com/Articles/77198/Routing-Manager-for-WCF Download source Contents Features ...
- PCI Express(六) - Simple transactions
原文地址:http://www.fpga4fun.com/PCI-Express6.html Let's try to control LEDs from the PCI Express bus. X ...
- Akka源码分析-Router
akak中还有一个比较重要的概念,那就是Router(路由).路由的概念,相信大家都不陌生,在akka中,它就是其他actors的一个代理,会把消息按照路由规则,分发给指定的actor.我一般喜欢把R ...
- AKKA Router路由
路由概念 大量的actor在并行工作的时候,处理到来的消息流,这时候就需要一个组件或者东西来引导消息从源到目的地Actor,这个组件或者东西就是Router在Akka中,router也是一种actor ...
- Endless looping of packets in TCP/IP networks (Routing Loops)
How endless looping of packets in a TCP/IP network might occur? Router is a device used to interconn ...
- nodejs开发 express路由与中间件
路由 通常HTTP URL的格式是这样的: http://host[:port][path] http表示协议. host表示主机. port为端口,可选字段,不提供时默认为80. path指定请求资 ...
- The main concepts
The MVC application model A Play application follows the MVC architectural pattern applied to the we ...
- 转:分享13款PHP开发框架
文章来自于:http://mashable.com/2014/04/04/php-frameworks-build-applications/ Building software applicatio ...
随机推荐
- 推断一个java文件和邮箱格式是否合法
import java.util.Scanner; public class StringTest { public static void main(String[] args) { int bac ...
- javascript创建对象的方法--基本模式
javascript创建对象的方法--基本模式 一.总结 关注本质 二.代码 <!DOCTYPE html> <html lang="zh-cn"> < ...
- thinkphp验证码(总结之后,效率非常好)
thinkphp验证码(总结之后,效率非常好) 一.总结 1.总结:总结之后,效率非常好,复习的时候也才方便,也能深入到细处,非常方便建立熟悉感和突破使用困境 2.验证码使用中文集或者繁体集设置:这个 ...
- 【Codeforces Round #451 (Div. 2) B】Proper Nutrition
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以直接一层循环枚举. 也可以像我这样用一个数组来存y*b有哪些. 当然.感觉这样做写麻烦了.. [代码] /* 1.Shoud i ...
- 51NOD——T 1079 中国剩余定理
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1079 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难 ...
- linux下加入用户并赋予root权限
1.加入用户.首先用adduser命令加入一个普通用户,命令例如以下: #adduser tommy //加入一个名为tommy的用户 #passwd tommy //改动password Cha ...
- unity3d 改动gui label颜色,定义颜色需除以256
GUIStyle titleStyle2 = new GUIStyle(); titleStyle2.fontSize = 20; titleStyle2.normal.textColor = new ...
- Android学习笔记之滑动翻页(屏幕切换)
如何实现手机上手动滑动翻页效果呢?呵呵,在这里我们就给你们介绍一下吧. 一般实现这个特效会用到一个控件:ViewFlipper <1>View切换的控件—ViewFlipper 这个控件是 ...
- [置顶]
WebService学习总结(1)——WebService相关概念
一.序言 大家或多或少都听过 WebService(Web服务),有一段时间很多计算机期刊.书籍和网站都大肆的提及和宣传WebService技术,其中不乏很多吹嘘和做广告的成 分.但是不得不承认的是W ...
- nginx+tomcat 架构 HttpServletRequest.getScheme()获取正确的协议
http://blog.csdn.net/ofofw/article/details/46791447