前言
在开发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，刚开始会很难接受，之后你会有意想不到的惊喜。
