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