Router入门0x203: react、react-route、react-route-dom

luxixing 发布于2019-08-23 12:15 / 3336人阅读

摘要：概述上一章使用的是自己实现的，当然已经有现成的库给我们用了，那就是。总结看透它，然后掌握它资源源码

0x000 概述

上一章使用的是自己实现的route，当然已经有现成的库给我们用了，那就是react-route。

0x001 history Api说明

在说这个库之前，得先对history新的api做一个了解

window.history.pushState(data,title,?url)

data：数据

title：标题

url：地址

当我们调用该函数的时候，将改变地址栏的地址，但是却不会导致页面重新去后台获取，如下图操作，在第一次初始化完成之后，我们依次调用

window.history.pushState({name:"a"},"","a")
window.history.pushState({name:"b"},"","b")
window.history.pushState({name:"c"},"","c")
window.history.pushState({name:"d"},"","d")

将会看到地址栏分别变成了：

https://github.com/a
https://github.com/b
https://github.com/c
https://github.com/d

但是网络请求却没有发出

window.history.state：该变量可以获取到跳转当前所处state时传入的data:

window.onpopstate：这是一个事件，可以设置监听器，监听状态被pop出来的时候的事件，其中go、back会触发该事件

总结
根据以上几个特性，就可以和上一章一样，做出一个基于history模式的路由库了

0x002 history库说明

history是一个针对该特性封装的库，以下是示例代码

import createHistory from "history/createBrowserHistory"

const history = createHistory()

// 监听 location 的变化
const unlisten = history.listen((location, action) => {
    // location is an object like window.location
    console.log(action, location.pathname, location.state)
})
// 修改 location
history.push("/home", { some: "state" })
// 取消监听
unlisten()

查看浏览器

0x003 react-route

react-route+history+react就可以形成一个套餐了

源码

import React from "react"
import ReactDom from "react-dom"
import { Router, Route, Switch,withRouter } from "react-router"
import createHistory from "history/createBrowserHistory"

class App extends React.Component{
    render(){
        console.log(this)
        return(
            
                
                    
                    
                    
                
                
                
                    ({render:()=>首页
})}>
                    ({render:()=>文章
})}>
                    ({render:()=>我的
})}>
                
            
        )
    }
}

const history = createHistory()

let MyApp=withRouter(App)

ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

效果

说明

App组件说明
App组件是跟组件，所有的组件都挂载在这个组件之下，在这个组件中，使用了两个react-route的组件，一个是Switch，用来在路由变化的时候切换显示的路由；一个是Route组件，一个Route代表一个页面，也代表一个组件，这里用了三个Route,每个Route对应一个路由，也对应一个组件，这里的组件为了方便，直接用匿名函数实现，分别是：

()=>({render:()=>首页}) // 对应`/index`
()=>({render:()=>文章}) // 对应`/article`
()=>({render:()=>我的
}) // 对应`/mine`

当我们点击相应的按钮的时候，将会调用this.props.history.push("${path}")来跳转到对应的页面，其中${path}是我们设置的Route组件的path属性。

history
通过history库来做location监听和跳转

withRoute是一个HOC，为App组件注入了history对象和路由相关的属性，这样可以屏蔽路由的存在，将App组件变成一个纯粹的组件

Router组件接管了histoy对象，在该组件中完成了history的监听和路由的渲染

0x004 react-route-dom

上面的调用太复杂了，需要手动创建history、调用this.props.history.push("/index")跳转，那有没有简单点的呢？那就是react-router-dom，这个库封装了react-route、history库，并提供了几个实用的组件

源码

import React from "react"
import ReactDom from "react-dom"
import {BrowserRouter, Switch, Route, Link, withRouter} from "react-router-dom"

class App extends React.Component {
    render() {
        return (
            
                
                    首页
                    文章
                    我的
                
                
                
                     ({render: () => 首页
})}>
                     ({render: () => 文章
})}>
                     ({render: () => 我的
})}>
                
            
        )
    }
}

let MyApp = withRouter(App)


ReactDom.render(
    
        
    ,
    document.getElementById("app")
)

说明：

使用BrowserRouter替代Router，并且不再手动创建history

使用Link直接跳转

该库是在react-route和history库的基础之上封装的，只是为了在dom环境下快速调用，并且提供了一个更加实用的组件而已，不能应为这个库而忘记了本质。

0x005 总结

看透它，然后掌握它

0x006 资源

源码

GPU云服务器云服务器 react-router react-router4 react router cdn react-router-redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98187.html

Router入门0x202: 自己实现 Router 页面调度和特定页面访问

摘要：概述上一章讲了如何实现组件页面切换，这一章讲如何解决上一章出现的问题以及如何优雅的实现页面切换。在中监听了事件，这样就可以在变化的时候，需要路由配置并调用。 0x000 概述上一章讲了SPA如何实现组件/页面切换，这一章讲如何解决上一章出现的问题以及如何优雅的实现页面切换。 0x001 问题分析回顾一下上一章讲的页面切换，我们通过LeactDom.render(new Articl...

dance 2019-08-23 12:10 评论0 收藏0
Router入门0x205: react-route + redux + react 集成

摘要：概述这一章终于大集成了集成源码效果说明集成主要是用到库集成源码效果说明主要用到库，是针对库在环境下的封装组件，注入等属性接管跟组件指定路由和组件的对应关系集成源码引入相关的包和链接组件效果说明主要用到库都是用的接 0x000 概述这一章终于大集成了 0x001 集成react 源码 import React from react import ReactDom from rea...

yiliang 2019-08-23 12:16 评论0 收藏0
Router入门0x204: react-route简单栗子

摘要：概述这一章仔细讲一讲的使用栗子简单使用源码简单使用首页文章我的首页文章我的效果带导航激活效果源码带导航效果首页文章我的首页文章我的效果说明增强版，如果当前路由命中，将会启用或者。 0x000 概述这一章仔细讲一讲 react-route 的使用栗子 0x001 简单使用源码 import React from react import ReactDom from react-d...

番茄西红柿 2019-08-23 12:16 评论0 收藏0
手挽手带你学React：三档 React-router4.x的使用

摘要：我们在内部来渲染不同的组件我们这里采用哈希路由的方式，鉴于的渲染机制，我们需要把值绑定进入内部。手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目什么是React-router React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗一...

SunZhaopeng 2019-08-23 15:11 评论0 收藏0
React 入门实践

摘要：更多相关介绍请看这特点仅仅只是虚拟最大限度减少与的交互类似于使用操作单向数据流很大程度减少了重复代码的使用组件化可组合一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。在使用后，就变得很容易维护，而且数据流非常清晰，容易解决遇到的。欢迎移步我的博客阅读：《React 入门实践》在写这篇文章之前，我已经接触 React 有大半年了。在初步学习 React 之后就正式应用到项...

shenhualong 2019-08-19 17:47 评论0 收藏0