react-router-v4
一、简介
一切皆组件
react-router在这个版本被拆分成了三个包
- react-router （核心库）
- react-router-dom （浏览器环境）
- react-router-native （react-native环境）
二、基本概念
- 安装
基于web浏览器开发，所以只需要引入react-router-dom
npm install -S react-router-dom
or
yarn add react-router-dom
- 官方示例
- 引入并拟写基本结构
import React from 'react'
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
const BasicExample = () => (
- 首页
- 关于
- 主题列表
)
注:
BrowserRouter(路由器)
Route(路由)
exact：唯一匹配，仅匹配"/",否则会同时匹配"/"和"/xxx"
path：路径
component：路径匹配后所要渲染的组件
Link(链接 想象成标签)
- Home及About组件实现
const Home = () => (
首页
)
const About = () => (
关于
)
- Topics及Topic组件实现
const Topics = ({ match }) => (
主题列表
-
使用 React 渲染
-
组件
-
属性 v. 状态
(
请选择一个主题。
)}/>
)
const Topic = ({ match }) => (
{match.params.topicId}
)
注:
match(匹配Route加载的组件所获取的一个对象参数)
isExact: 是否是全等匹配
params: path正则解析后的值对象
path: 路由的地址
url: 与当前location路径名所匹配部分
三、基本概念
-
Router（路由器）
- BrowserRouter （由服务器来管理动态请求时使用，h5的history）
- HashRouter （静态网站，老版本浏览器的history）
- MemoryRouter （主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动）
-
（路由） exact: propType.bool （是否是唯一匹配）
path: propType.string （路径，如果没有赋值，则默认渲染指定的component）
component: propType.func （常用）
一个React组件。当带有component参数的route匹配成功后，route会返回一个新的元素，其为component参数所对应的React组件（使用React.createElement创建）。
例: Route path='/page' component={Page} />- render: propType.func （常用）
当地址匹配成功后调用该函数。该过程与传入component参数类似，并且对于行级渲染与需要向元素传入额外参数的操作会更有用。最后返回一个React element。
例: const extraProps = { color: 'red' }( )}/> - children：propType.func （不常用，一般用在path无法匹配时呈现的'空'状态）
一个返回React element的函数。与上述两个参数不同，无论route是否匹配当前location，其都会被渲染。
( props.match ? : )}/> - 其他属性看官方文档
-
match（匹配Route加载的组件所获取的一个对象参数）
- isExact: 是否是全等匹配
- params: 由pathToRegexp解析path后所组成的一个对象
//通过pathToRegexp解析path const match = re.exec(pathname) if (!match) return null const [ url, ...values ] = match const isExact = pathname === url //如果exact为true，需要pathname===url if (exact && !isExact) return null return { path, url: path === '/' && url === '' ? '/' : url, isExact, params: keys.reduce((memo, key, index) => { memo[key.name] = values[index] return memo }, {}) }pathToRegexp解析path: var keys = [] var re = pathToRegexp('/foo/:bar', keys) // re = /^\/foo\/([^\/]+?)\/?$/i // keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }]- path: 路由的地址
- url: 与当前location路径名所匹配部分
-
*URL会更新，组件会被重新渲染，但是页面不会重新加载
- to:
propType.string
需要跳转到的路径(pathname)或地址（location）
关于propType.obj
- replace: PropTypes.bool
为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。 为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false。 -
将仅渲染第一个匹配的路由
import { Switch, Route } from 'react-router'否则会渲染所有匹配的路由