前言
在开发spa项目中，前端路由是一个无法绕开的技术，在整个spa前端架构中我觉的掌握前端路由配置，状态管理以及异步请求的封装是最基本的能力。本文主要介绍react-router对于react项目的作用，以及基本配置。 注：本文主要以react-router v4为基础 简单的介绍下
reactjs路由作用
React Router 是完整的 React 路由解决方案。他满足了reactjs项目对于路由的大部分 需求，特点如下：
- 有简单的 API 与强大的功能
- 实现代码缓冲加载
- 动态路由匹配
- 路由导航（路由拦截）
- 以及建立正确的位置过渡处理。
react router详解
reacter-router v3.x
路由结构组成
- 路由组件：Router
- 路由匹配组件：Route
- 路由导航组件：Link
主要api详解
- Router: 能保持 UI 和 URL 的同步，其主要属性children/routes是指一个或多个的 Route 或 PlainRoute
<Router routes={...}>
...
</Router>
- Route: 声明路由映射到应用的组件层，其path属性用来直接路由，component用来匹配URL时的组件也可以用components匹配多个组件
<Route path="/route" component={App}></Route>
- IndexRoute: 为父 route 提供一个默认的 "child"
- IndexRedirect: 从一个父 route 的 URL 重定向到其他 route
- Link:以适当的 href 去渲染一个可访问的锚标签。
<Link to={`/users/list`} activeClassName="active">{user.name}</Link>
- browserHistory： 用来实现组件的外部跳转
import { browserHistory } from 'react-router'
browserHistory.push('/path')
- onEnter（进入）和 onLeave（离开） 在页面跳转确认时触发一次
//replaceState控制路由跳转
onEnter: function (nextState, replaceState) {
replaceState(null, '...')
}
基本配置
- 嵌套型语法实现
import React from 'react'
import { Router, Route, Link } from 'react-router'
import BasicLayout from './components/BasicLayout'
React.render((
<Router>
<Route path="/" component={BasicLayout}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="children/:id" component={Children2} />
</Route>
</Route>
</Router>
), document.body)
//基础页面组件
const BasicLayout = React.createClass({
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/inbox">Inbox</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
- 原生数组对象配置实现
const routes = [
{
//路由对应的路径
path: '/',
//渲染的组件
component: App,
indexRoute: { component: Dashboard },
//路由拦截
onEnter: function (nextState, replaceState) {
replaceState(null, '...')
}
// 子路由
childRoutes: [
//同父路由配置文件
{ path: 'about', component: About },
{ path: 'inbox',
component: Inbox,
childRoutes: [
//同父路由配置文件
{ path: '/messages/:id', component: Message },
{ path: 'messages/:id',
onEnter: function (nextState, replaceState) {
replaceState(null, '/messages/' + nextState.params.id)
}
}
]
}
]
}
]
React.render(<Router routes={routes} />, document.body)
react-router ~v4.x
路由结构组成
- 路由组件:BrowserRouter和HashRouter
- 路由匹配组件:Switch 和 Route
- 路由导航组件:Link
主要api详解
- BrowserRouter和HashRouter两种路由模式跟router3中的history 和 hash一个意思
import {
BrowserRouter as Router
} from "react-router-dom";
export default function BasicExample() {
return (
<Router>
.....
</Router>
)}
- Switch 渲染第一个被location匹配到的并且作为子元素的或者
<Switch>
/
<Route exact path="/">
<Home />
</Route>
</Switch>
- Route 官方文档给出 Its most basic responsibility is to render some UI when its path matches the current URL。即子组件会被渲染到 注：V4 中的 routes 默认是 inclusive 的，这就意味着多个 可以同时匹配 和呈现，如果只匹配一个则需要用switch来实现。
<Route exact path="/">
<Home />
</Route>
- Link:提供应用程序周围的声明式、可访问的导航。
基本配置
...待续
react-router v3和v4对比
v3：路由是配置处理
- 路由集中在一处；
- 布局和页面的层叠由层叠的 组件控制；
- 布局和页面组件是路由的一部分
～v4：只是组件
- 分布式路由管理
- 匹配原则：包容性和排他性
- 路由存在布局和ui之间
- 适配了移动应用端
总结
对于spa为基础的项目前端路由是必备功能之一，在react-router中v4之后和v4之后的版本差距是比较大的，如果之前没接触过react用的是vue，建议先使用v4之前的版本，因为他与vue-router的路由定义基本相同，都是集中管理，这样你上手react项目会很快。如果一直用react开发并且用的是v4之前建议尝试下v4，刚开始会很难接受，之后你会有意想不到的惊喜。
