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的更多相关文章

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

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

  2. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  3. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  4. [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 ...

  5. [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 ...

  6. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  7. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  8. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  9. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  10. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

随机推荐

  1. ASP.NET MVC Web API 学习笔记---第一个Web API程序---近来很多大型的平台都公开了Web API

    1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过 ...

  2. VS Code 关于SFTP上传文件到多服务器的配置

    工欲善其事,必先利其器! 刚学前端的时候一直用的DW来编写代码,其功能非常强大,但在Linux下不能用,所以就转VS Code了. 但是刚开始使用VS Code的时候,很多DW上的功能需要自己安装扩展 ...

  3. gdb x查看二进制

    参考 http://blog.csdn.net/allenlinrui/article/details/5964046 (gdb) disassemble main Dump of assembler ...

  4. Arrays.asList()方法的限制

    Arrays.asList()方法的限制是他对所产生的List类型做出了最理想的假设 package example; import java.util.Arrays; import java.uti ...

  5. HDU 1142 A Walk Through the Forest(最短路+dfs搜索)

    A Walk Through the Forest Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Jav ...

  6. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  7. 【习题 7-8 UVA-12107】Digit Puzzle

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 迭代加深搜索. 枚举最大层数.(也即改变的数字个数 然后枚举第一个改哪个数字,第二个改哪个数字.. 一定要注意字典序问题. 每次优先 ...

  8. WPF MVVM示例自定义模板数据绑定

    在触摸屏设备上.由于列表是的信息展示不是非常直观和便捷操作. 所以也就出现了很多用面板控件:类似win10的Metro风格, 所以抽空做了一个WPF面板控件. 话不多上 , 先上一个示例图. 为了便于 ...

  9. CentOS卸载Apache方法

    https://www.kafan.cn/edu/49420412.html CentOS卸载Apache方法 首先关闭httpd服务 /etc/init.d/httpd stop 列出httpd相关 ...

  10. Android学习笔记之Bitmap位图的旋转

    位图的旋转也可以借助Matrix或者Canvas来实现. 通过postRotate方法设置旋转角度,然后用createBitmap方法创建一个经过旋转处理的Bitmap对象,最后用drawBitmap ...