Reactjs系列四react-router（上）

前言

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