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:

  1. npm install --save preact-router

Define routers:

  1. import {h} from 'preact';
  2. import { Router } from 'preact-router';
  3. import Profile from './Profile';
  4. import Home from './Home';
  5. import Error from './Error';
  6.  
  7. export default function App() {
  8. return (
  9. <Router>
  10. <Home path="/" />
  11. <Profile path="/profile/:user"/>
  12. <Error default/>
  13. </Router>
  14. );
  15. }

Defailt Error router:

  1. import {h} from 'preact';
  2. import {route} from 'preact-router';
  3.  
  4. const back = (e) => {
  5. route('/');
  6. };
  7.  
  8. export default Error = () => (
  9. <div>
  10. <h2>Error!</h2>
  11. <button onClick={e => back(e)}>Home</button>
  12. </div>
  13. );

Home: preact call route() function to navigate between components.

  1. import { h } from 'preact';
  2. import { route } from 'preact-router';
  3.  
  4. function search(query) {
  5. route(`/profile/${encodeURIComponent(query)}`);
  6. }
  7.  
  8. export default function Home() {
  9. return (
  10. <section>
  11. <p>Enter a Github Username</p>
  12. <input type="search"
  13. placeholder="username"
  14. onSearch={e => search(e.target.value)}
  15. />
  16. </section>
  17. );
  18. }

Profile.js: Stateful component, fetching data:

  1. import {h, Component} from 'preact';
  2. import User from './User';
  3.  
  4. const config = {
  5. url: 'https://api.github.com/users'
  6. };
  7.  
  8. export default class Profile extends Component {
  9. constructor(props) {
  10. super(props);
  11.  
  12. this.state = {
  13. loading: true,
  14. user: null
  15. };
  16. }
  17.  
  18. componentDidMount() {
  19. fetch(`${config.url}/${this.props.user}`)
  20. .then(resp => resp.json())
  21. .then(user => {
  22. this.setState({
  23. user,
  24. loading: false
  25. });
  26. })
  27. .catch(err => console.error(err));
  28. }
  29.  
  30. render({user: username}, {loading, user: userState}) {
  31. return (
  32. <div class="app">
  33. {loading
  34. ? <p>Fetching {username}'s profile</p>
  35. : <User image={userState.avatar_url}
  36. name={userState.name} />
  37. }
  38. </div>
  39. );
  40. }
  41. }

[PReact] Handle Simple Routing with preact-router的更多相关文章

  1. Preact(React)核心原理详解

    原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...

  2. Routing Manager for WCF4 z

    http://www.codeproject.com/Articles/77198/Routing-Manager-for-WCF Download source Contents Features ...

  3. PCI Express(六) - Simple transactions

    原文地址:http://www.fpga4fun.com/PCI-Express6.html Let's try to control LEDs from the PCI Express bus. X ...

  4. Akka源码分析-Router

    akak中还有一个比较重要的概念,那就是Router(路由).路由的概念,相信大家都不陌生,在akka中,它就是其他actors的一个代理,会把消息按照路由规则,分发给指定的actor.我一般喜欢把R ...

  5. AKKA Router路由

    路由概念 大量的actor在并行工作的时候,处理到来的消息流,这时候就需要一个组件或者东西来引导消息从源到目的地Actor,这个组件或者东西就是Router在Akka中,router也是一种actor ...

  6. 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 ...

  7. nodejs开发 express路由与中间件

    路由 通常HTTP URL的格式是这样的: http://host[:port][path] http表示协议. host表示主机. port为端口,可选字段,不提供时默认为80. path指定请求资 ...

  8. The main concepts

    The MVC application model A Play application follows the MVC architectural pattern applied to the we ...

  9. 转:分享13款PHP开发框架

    文章来自于:http://mashable.com/2014/04/04/php-frameworks-build-applications/ Building software applicatio ...

随机推荐

  1. Myeclipse集成Maven(图文说明)

    myeclipse 上安装 Maven3 环境准备: JDK 1.6 Maven 3.2.5 myeclipse 2013 安装 Maven 之前要求先确定你的 JDK 已经安装配置完毕.Maven是 ...

  2. 基本3D变换之World Transform, View Transform and Projection Transform

    作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...

  3. Funui-overlay 如何添加theme 的 overlay

    昨天更改theme主题的时候,发现所有仓库下的theme都是共用的.也就是说,如果你更改了52平台下的theme,那么你提交了代码以后,82下也会发生相应的更改.但是,昨天修改的theme属性,只在3 ...

  4. java DSA Signature Sign And Verify

    SignatureSignAndVerify import java.security.KeyPair; import java.security.KeyPairGenerator; import j ...

  5. 非常不错的canvas效果,线随心动

    非常不错的canvas效果,下面是html代码. <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. django 简单会议室预约(4)

    基本的配置已经完成了,来看看最重要的views.py 先看看简单的注册登录功能,在django里有一个专门的模块用来验证用户信息 :所以只需要调用就好了: #-*-coding:utf-8 -*- f ...

  7. Scala入门到精通——第二十二节 高级类型 (一)

    作者:摇摆少年梦 视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 this.type使用 类型投影 结构类型 复合类型 1. this.type使用 c ...

  8. 4.auto详解

    #include <iostream> using namespace std; template <calss T1,class T2> auto add(T1 t1, T2 ...

  9. Eclipse如何从导入SVN上导入项目

    1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...

  10. 微软云 azure 数据迁移之oracle11g dataguard

    背景,将本地的oracle数据迁移到微软云azure云上面的oracleserver. 1.复制本地的rman备份集到微软云azure的oracleserver上 scp -r -P56922 201 ...