[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 ...
随机推荐
- Myeclipse集成Maven(图文说明)
myeclipse 上安装 Maven3 环境准备: JDK 1.6 Maven 3.2.5 myeclipse 2013 安装 Maven 之前要求先确定你的 JDK 已经安装配置完毕.Maven是 ...
- 基本3D变换之World Transform, View Transform and Projection Transform
作者:i_dovelemon 来源:CSDN 日期:2014 / 9 / 28 主题:World Transform, View Transform , Projection Transform 引言 ...
- Funui-overlay 如何添加theme 的 overlay
昨天更改theme主题的时候,发现所有仓库下的theme都是共用的.也就是说,如果你更改了52平台下的theme,那么你提交了代码以后,82下也会发生相应的更改.但是,昨天修改的theme属性,只在3 ...
- java DSA Signature Sign And Verify
SignatureSignAndVerify import java.security.KeyPair; import java.security.KeyPairGenerator; import j ...
- 非常不错的canvas效果,线随心动
非常不错的canvas效果,下面是html代码. <!DOCTYPE html> <html> <head> <meta charset="utf- ...
- django 简单会议室预约(4)
基本的配置已经完成了,来看看最重要的views.py 先看看简单的注册登录功能,在django里有一个专门的模块用来验证用户信息 :所以只需要调用就好了: #-*-coding:utf-8 -*- f ...
- Scala入门到精通——第二十二节 高级类型 (一)
作者:摇摆少年梦 视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 this.type使用 类型投影 结构类型 复合类型 1. this.type使用 c ...
- 4.auto详解
#include <iostream> using namespace std; template <calss T1,class T2> auto add(T1 t1, T2 ...
- Eclipse如何从导入SVN上导入项目
1.右键单击,选择 Import,进入导入项目窗口 2.点击选择从SVN检出项目,点击Next下一步 3.选择创建新的资源库位置,点击Next,如果项目之前已经导入过删除掉了,重新导入的时候,只需勾选 ...
- 微软云 azure 数据迁移之oracle11g dataguard
背景,将本地的oracle数据迁移到微软云azure云上面的oracleserver. 1.复制本地的rman备份集到微软云azure的oracleserver上 scp -r -P56922 201 ...