[Preact] Integrate react-router with Preact
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>
);
[Preact] Integrate react-router with Preact的更多相关文章
- Preact(React)核心原理详解
原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
随机推荐
- 你必须要知道的几个CSS技巧
有些经典的CSS技巧,我们还是需要记住的,这样可以节省我们大量的时间,下面零度就为大家推荐几个比较好的CSS技巧: 1.在不同页面上使用同样的导航代码 许多网页上都有导航菜单,当进入某页时,菜单上相应 ...
- hadoop-2.6.0.tar.gz + hive-1.0.0.tar.gz + pig-0.15.0.tar.gz的安装
这里,为什么选择用hadoop-2.6.0.tar.gz + hive-1.0.0.tar.gz是为了搭配兼容. hadoop-2.6.0.tar.gz + hive-1.0.0.tar. ...
- IBM Tivoli Netview在企业网络管理中的实践(附视频)
今天我为大家介绍的一款高端网管软件名叫IBM Tivoli NetView,他主要关注是IBM整理解决方案的用户,分为Unix平台和Windwos平台两种,这里视频演示的是基于Windows 2003 ...
- J2msi 自己制作的把exe打成安装包简易GUI程序
因为wix是用命令行执行的,操作比较麻烦,所以自己写了个wix生成安装包的图形操作程序, 原理很简单,主要用java 来执行 wix 的heat .candle 和 light 命令 ,最后生成安装文 ...
- javafx virtual keyboard
public class EffectTest extends Application { @Override public void start(final Stage stage) { final ...
- javafx DropShadow
public class EffectTest extends Application { DropShadow shadow = new DropShadow(); public static vo ...
- MATLAB 软件学习
what 列出当前目录或指定目录下的M\MAT 和 MAX 文件 … 在语句行尾端表示该行未完 ! 调用操作系统的命令 isvarname 判断变量名是否有效 声明全局变量 变量名前加 ...
- 欧拉回路&欧拉路径学习笔记
基础性质(用来判定): 1.无向图欧拉回路没有奇数点 (有向图所有点入度等于出度) 2.无向图欧拉路径只有两个奇数点 (有向图有一个顶点入度比出度大1,有一个顶点出度比入度大1,其他的全相等) 3.图 ...
- 初识Django框架——环境搭建前你需要了解的几点
Django是一个开放源代码的Web应用框架,由Python写成. 采用了MVC的框架模式,即模型M,视图V和控制器C. 它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是C ...
- flask使用第三方云通讯平台时,出现{'172001':'网络错误'}解决方法
问题描述:flask使用第三方云通讯平台时,出现{'172001':'网络错误'} 解决方法: 在sms.py文件中添加如下代码 import ssl # 取消证书验证ssl._create_defa ...