React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router

in webpack.config.js:

    resolve: {
alias: {
'react': 'preact-compat',
'react-deom': 'preact-compat'
}
},

Add resolve block. it alias 'react' to use 'preact-compat'.

Change Route definations.

import {h} from 'preact';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Profile from './Profile';
import Home from './Home';
import Error from './Error'; export default function App() {
return (
<Router>
<Switch>
<Route path='/' component={Home} exact />
<Route path='/profile/:user' component={Profile} />
<Route component={Error}></Route>
</Switch>
</Router>
);
}

Using 'Switch' to allow only one component showing at a time.

Dealing with navigation:

import { h } from 'preact';
import {withRouter} from 'react-router-dom'; function search(router, query) {
router.history.push(`/profile/${encodeURIComponent(query)}`);
} const Home = withRouter((router) => {
return (
<section>
<p>Enter a Github Username</p>
<input type="search"
placeholder="username"
onSearch={e => search(router, e.target.value)}
/>
</section>
);
}); export default Home;

We can use High Order component 'withRouter', it inject 'router' param into our component, then we can use:

router.history.push(`/profile/${encodeURIComponent(query)}`);

to nav around.

Get router params:

    componentDidMount() {
const username = this.props.match.params.user;
fetch(`${config.url}/${username}`)
.then(resp => resp.json())
.then(user => {
this.setState({
user,
loading: false
});
})
.catch(err => console.error(err));
}

You can get the router param by using:

const username = this.props.match.params.user;

Link tag:

import {h} from 'preact';
import {Link} from 'react-router-dom'; export default Error = () => (
<div>
<h2>Error!</h2>
<Link to='/'>Home</Link>
</div>
);

随机推荐

  1. IIS上虚拟站点的web.config与主站点的web.config冲突解决方法 分类: ASP.NET 2015-06-15 14:07 60人阅读 评论(0) 收藏

    IIS上在主站点下搭建虚拟目录后,子站点中的<system.web>节点与主站点的<system.web>冲突解决方法: 在主站点的<system.web>上一级添 ...

  2. mysql 5.7 zip 文件在 windows下的安装

    1.下载mysql最新版本. http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.15-winx64.zip 2.解压到文件夹. D:\softwa ...

  3. CHAR 详解

    CHAR(20):20指的是表中的a字段能存储的最大字符个数 CREATE TABLE `a` ( `a` char(20) DEFAULT NULL) ENGINE=InnoDB DEFAULT C ...

  4. 基于mAppWidget实现手绘地图--索引&amp;DEMO

    文章翻译完了,梳理一下,附Demo下载 基于mAppWidget实现手绘地图(一)–简介 基于mAppWidget实现手绘地图(二)–概要 基于mAppWidget实现手绘地图(三)–环境搭建 基于m ...

  5. Vue 中使用 viewerjs进行本地上传预览图片

    https://www.cnblogs.com/shenjp/p/9754171.html 如果图片路径是 接口的返回信息的话,将路径存储在数组中,在this.$nextTick中实例化Viewer: ...

  6. yum 安装 php7 ,lamp ,以及安装swoole

    1 更新yum yum update 2 安装依赖 yum -y install pcre* openssl* yum -y install gcc make gd-devel libjpeg-dev ...

  7. Visitor 访问者模式 MD

    访问者模式 简介 访问者模式是设计模式中相对比较复杂的一个,项目中可能见得非常少. 定义:封装某些作用于某种数据结构中各元素的操作,它可以在不改变数据结构的前提下,定义作用于这些元素的新的操作. 表示 ...

  8. orcal exists

    Oracle使用了一个复杂的自平衡B-tree结构.通常,通过索引查询数据比全表扫描要快.当 Oracle找出执行查询和Update语句的最好路径时,Oracle优化器将使用索引.同样在联结多个表时使 ...

  9. [洛谷P1822] 魔法指纹

    洛谷题目连接:魔法指纹 题目描述 对于任意一个至少两位的正整数n,按如下方式定义magic(n):将n按十进制顺序写下来,依次对相邻两个数写下差的绝对值.这样,得到了一个新数,去掉前导0,则定义为ma ...

  10. SSH整合需要的jar包

    [struts相关jar] commons-fileupload-1.2.2.jar commons-io-2.0.1.jar commons-lang3-3.1.jar freemarker-2.3 ...