react-router
素燃
忙里偷闲,发现有意思的东i就写点
展开
-
react-router5 - 实现 Switch 和 Redirect 组件
用法 <HashRouter> <Link to='/'>home</Link> <Link to='/about'>about</Link> <Link to='/mine'>mine</Link> <div> <Switch> <Route component={Home} path='/' exact></Route原创 2020-06-04 17:46:53 · 1256 阅读 · 0 评论 -
react-router4 - 实现Link组件进行点击跳转
原生Link组件用法 <Router> <Link to='/'>Home</Link> <Link to='/about'>About</Link> <Link to='/mine'>Mine</Link> <div> <Route component={Home} path='/' exact></Route> <Route comp原创 2020-06-03 17:49:11 · 2240 阅读 · 0 评论 -
react-router3 - 利用 path-to-regexp 实现路径及参数的匹配
上节代码也看到了, 在判断的时候,是直接拿 props上传的 path 和 监听到的 pathname作的全等比较那这样的话,如果手动传入 /about/1, /about/page/2 这样的路径就匹配不到了, 肯定会返回 null 的,path-to-regexp仓库path-to-regexp部分用法// pathToRegexp(str, [], {})传3个参数, 要匹配的字符串目标,一个数组,最后是一个对象const { pathToRegexp } = require("path原创 2020-06-03 17:09:05 · 1389 阅读 · 0 评论 -
react-router2 - 实现 HashRouter 和 Route组件理解实现原理
原生库的使用官方路由使用效果演示实现思路1. 先导出俩组件react-router-dom / index.jsimport Route from './Route';import HashRouter from './HashRouter';export { HashRouter, Route };2. 创建上下文对象import React from 'react';export default React.createContext();3. HashRouter组件i原创 2020-06-03 15:57:02 · 471 阅读 · 0 评论 -
reactRouter1 - 路由实现原理(hash, history)
实现原理1. 利用hash和history这两种模式实现对路由的切换2. 根据匹配到的路径,渲染对应的组件hash模式原理通过监听 hashchange 事件, 在回调里拿到 window.location.hash 的值hash 模式演示 <body> <a href="#/a">去a</a> <a href="#/b">去b</a> <div id="box"></div>原创 2020-06-03 13:47:50 · 2065 阅读 · 0 评论