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 = () => (
<Router>
<div>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">关于</Link></li>
<li><Link to="/topics">主题列表</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>
</div>
</Router>
)
注:
BrowserRouter(路由器)
Route(路由)
exact：唯一匹配，仅匹配"/",否则会同时匹配"/"和"/xxx"
path：路径
component：路径匹配后所要渲染的组件
Link(链接 想象成<a>标签)
- Home及About组件实现
const Home = () => (
<div>
<h2>首页</h2>
</div>
)
const About = () => (
<div>
<h2>关于</h2>
</div>
)
- Topics及Topic组件实现
const Topics = ({ match }) => (
<div>
<h2>主题列表</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>
使用 React 渲染
</Link>
</li>
<li>
<Link to={`${match.url}/components`}>
组件
</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
属性 v. 状态
</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic}/>
<Route exact path={match.url} render={() => (
<h3>请选择一个主题。</h3>
)}/>
</div>
)
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
)
注:
match(匹配Route加载的组件所获取的一个对象参数)
isExact: 是否是全等匹配
params: path正则解析后的值对象
path: 路由的地址
url: 与当前location路径名所匹配部分
三、基本概念
-
Router（路由器）
- BrowserRouter （由服务器来管理动态请求时使用，h5的history）
- HashRouter （静态网站，老版本浏览器的history）
- MemoryRouter （主要用于服务器渲染。它创建一个内存中的history对象，不与浏览器URL互动）
-
<Route>（路由）
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' } <Route path='/page' render={(props) => ( <Page {...props} data={extraProps}/> )}/>- children：propType.func （不常用，一般用在path无法匹配时呈现的'空'状态）
一个返回React element的函数。与上述两个参数不同，无论route是否匹配当前location，其都会被渲染。
<Route path='/page' children={(props) => ( props.match ? <Page {...props}/> : <EmptyPage {...props}/> )}/>- 其他属性看官方文档
-
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路径名所匹配部分
-
<Link>
*URL会更新，组件会被重新渲染，但是页面不会重新加载
- to:
propType.string
需要跳转到的路径(pathname)或地址（location）
<Link to="/about">关于</Link> <Link to="/courses"/>propType.obj
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/>- replace: PropTypes.bool
为 true 时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。 为 false 时，点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false。 <Link to="/courses" replace /> -
<Switch>
将仅渲染第一个匹配的路由
import { Switch, Route } from 'react-router' <Switch> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/:user" component={User}/> <Route component={NoMatch}/> </Switch>否则会渲染所有匹配的路由
