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 &lt;Link&gt;

    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. js数组中的常用方法总结

    栈方法(后进先出) ArrayObj.push()方法 ArrayObj.pop()方法 ArrayObj.push():就是向数组末尾添加新的元素,返回的是数组新的长度.ArrayObj.pop() ...

  2. 自然语言15_Part of Speech Tagging with NLTK

    https://www.pythonprogramming.net/part-of-speech-tagging-nltk-tutorial/?completed=/stemming-nltk-tut ...

  3. DataSet key points

    In a typical multiple-tier implementation, the steps for creating and refreshing a DataSet, and in t ...

  4. Controlling Site Provisioning Process with a Custom Provider

    http://www.cnblogs.com/frankzye/archive/2010/09/07/1820346.html http://sujoysharepoint2010.blogspot. ...

  5. sql事务,在sql2000里判断执行是否成功用@@ERROR 判断

    原文:sql事务,在sql2000里判断执行是否成功用@@ERROR 判断 贴个sql事务,在sql2000里判断执行是否成功用@@ERROR 判断 这个东西多少还是有点问题,sql2005了可以用t ...

  6. Linux C语言操作MySQL

    原文:Linux C语言操作MySQL 1.MySQL数据库简介 MySQL是一个开源码的小型关系数据库管理系统,体积小,速度快,总体成本低,开源.MySQL有以下特性: (1) 使用C和C++编写, ...

  7. jquery中html()或text()方法获取或设置p标签的值

    html()方法可以用来读取或者设置某个元素中的HTML内容,text()方法可以用来读取或者没置某个元素中的文本内容 html()方法 此方法类似于JavaScript中的innerHTML属性,可 ...

  8. 按bean的属性值对list集合进行排序

    List根据对象的某个属性排序工具类 List排序 import java.util.Collections; import java.util.Comparator; import java.uti ...

  9. C# 说说lock到底锁谁?(1)

    写在前面 最近一个月一直在弄文件传输组件,其中用到多线程的技术,但有的地方确实需要只能有一个线程来操作,如何才能保证只有一个线程呢?首先想到的就是锁的概念,最近在我们项目组中听的最多的也是锁谁,如何锁 ...

  10. 调试 lvgl 的一个例子

    发现一个新的 vector graphic 的库,用 C 写的,效果丰富,接口简单,而且是 MIT License,所以想试一试.因为它支持 framebuffer,所以,在 linux 上先走一个. ...