1. 理解react-router
react的一个插件库
专门用来实现一个SPA应用
基于react的项目基本都会用到此库
react-router: 实现了路由的核心功能
react-router-dom: 基于react-router,加入了在浏览器运行环境下的一些功能
2. 几个重要问题
1). SPA应用
单页Web应用(single page web application,SPA)
整个应用只有一个完整的页面
点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
当点击链接时, 只会做页面的局部更新
数据都需要通过ajax请求获取, 并在前端异步展现
2). 路由
1. 什么是路由?
一个路由就是一个映射关系(key:value)
key为路由路径, value可能是function/component
2. 路由分类
后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
前台路由: 浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件
3. 后台路由
* 注册路由: router.get(path, function(req, res))
* 当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
* 前端路由
* 注册路由: <Route path="/about" component={About}>
* 当浏览器的hash变为#about时, 当前路由组件就会变为About组件
3). 关于url中的#
1. 理解#
'#'代表网页中的一个位置。其右面的字符,就是该位置的标识符
改变#不触发网页重载
改变#会改变浏览器的访问历史
2. 操作#
window.location.hash读取#值
window.onhashchange = func 监听hash改变
3. 学习资源:
阮一峰教程: http://www.ruanyifeng.com/blog/2011/03/url_hash.html
3. react-router的学习资源
github主页:
https://github.com/ReactTraining/react-router
官网教程:
https://github.com/reactjs/react-router-tutorial
阮一峰教程: http://www.ruanyifeng.com/blog/2016/05/react_router.html
4. 相关API
1). react-router中的相关组件:
Router: 路由器组件, 用来包含各个路由组件
Route: 路由组件, 注册路由
IndexRoute: 默认子路由组件
hashHistory: 路由的切换由URL的hash变化决定,即URL的#部分发生变化
Link: 路由链接组件
2). Router: 路由器组件
属性: history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象,供React Router匹配
子组件: Route
3). Route: 路由组件
属性1: path="/xxx"
属性2: component={Xxx}
根路由组件: path="/"的组件, 一般为App
子路由组件: 子<Route>配置的组件
4). IndexRoute: 默认路由
当父路由被请求时, 默认就会请求此路由组件
5). hashHistory
用于Router组件的history属性
作用: 为地址url生成?_k=hash, 用于内部保存对应的state
6). Link: 路由链接
属性1: to="/xxx"
属性2: activeClassName="active"
5. react-router的基本使用
1). 下载
npm install react-router --save
or
npm install react-router-dom --save
2). 定义各个路由组件
import React from 'react'
import {Route, Switch, Redirect} from 'react-router-dom'
import MyNavLink from './MyNavLink'
import About from '../pages/about'
import Home from '../pages/home'
export default class App extends React.Component {
render() {
return (
<div>
<h2>React Router Demo</h2>
<div className="list-group">
{}
<MyNavLink className="list-group-item" to='/about'>About</MyNavLink>
<MyNavLink className="list-group-item" to='/home'>Home</MyNavLink>
</div>
<div className="panel-body">
{}
<Switch>
<Route path='/about' component={About}/>
<Route path='/home' component={Home}/>
<Redirect to='/about'/>
</Switch>
</div>
</div>
)
}
}
3). index.js: 注册路由, 渲染路由器标签
import {render} from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './components/App'
import './index.css'
render(
(
<BrowserRouter>
<App />
</BrowserRouter>
),
document.querySelector('#root')
)
6. 优化Link组件
1). 优化NavLink.js
import {NavLink} from 'react-router-dom'
export default class MyNavLink extends Component {
render() {
return (
<NavLink {...this.props} activeClassName='activeClass' />
)
}
}
---使用activeClassName指定当前路由的Class
7.其他
this.props.history
history.push() ---这个方法会向history栈里面添加一条新记录,用户点击浏览器的回退按钮可以回到之前的路径。
history.replace() ---它不会向 history 添加新记录,而是替换掉当前的 history 记录。用户点击浏览器的回退按钮会回到原来路径的上一级
路由跳转与页面跳转
页面跳转:本地发请求 ---window.location = 'http://...' 或a标签
路由跳转:本地没有发请求 ---<NavLink to='' />