关于 React 路由，这些你必须知道！

什么是 React 路由？

React 路由和 Angular 路由一样，都是通过管理 URL，实现组件的切换与状态的变化或者说是视图的导航。

安装

在使用路由之前首先使用的是，路由的安装：

即：$ npm install -S react-router

普通用法

注：Router 组件本身只是一个容器，真正的路由要通过 Route 组件实现。

1. 引入和使用的方式：

import { Router, Route } from 'react-router';

render((

), document.getElementById('home'));

注：path="/" 表示路由的根路径，它表示的含义是将 Router 组件渲染到 id 为 main 的 Dom 片段中。

2. 路由使用方式主要有以下两种：

1> 同级多个路由的使用

2> 嵌套路由的使用方式一：

3> 嵌套路由的使用方式二：

let routes =

除了以上基本的用法之外，下面是一些其他的路由组件，通过以下这些组件可以实现更丰富的路由效果。

IndexRoute 组件

（默认路由）

作用：当通过路由找不到路径时，默认进行 indexRoute 组件配置路由。

例：

Redirect 组件与 IndexRedirect 组件

Redirect 组件

作用：Redirect 组件是由一个路由跳转到另一个路由，它使用 from，to 的方式，当用户访问 from 路由的时候，会自动跳转到 to 路由。

例如：

＜Redirect from="messages/:id" to="/messages/:id" />

解释：当用户访问 /home/messages/5，会自动跳转到 /messages/5。

IndexRedirect组件

作用：IndexRedirect 组件用于访问根路由的时候，将用户重定向到某个子组件。

＜IndexRedirect to="/profile " />

解释：当用户访问根路由的时候，会自动重定向到 profile 子组件。

Link 与 IndexLink

Link 组件

作用：Link 其实与 a 链接类似，只是允许用户点击之后，进行路由的跳转，它支持样式的修改，可以使用的属性包括: activeStyle, activeClassName

例如：

Profile

Profile

IndexLink 组件

作用：indexLink 组件在链接到根路由时，如果使用

Home , Home会一直处于激活状态，因为所有的 URL 的开头都是 / 。一般希望在 Home 路由被渲染后才激活的指向 / 的链接。activeStyle 和 activeClassName 会失效，或者说总是生效，因为 / 会匹配任何子路由。因此建议使用 Home

动态路由

1. 概念：本质上讲，动态路由，其实是按需加载，React Router 里的路径匹配以及组件加载都是异步完成的。

2. 动态路由的实现是通过 getChildRoutes，getIndexRoute 和 getComponents 这几个函数。以上几个函数均是异步执行，按需加载。只加载该 URL 对应页面所需的路径配置和组件。

const CourseRoute = {

path: 'course/:courseId',

getChildRoutes(location, callback) {

require.ensure([], function (require) {

callback(null, [

require('…')

])

})

}

React 路由存在的问题

主要的问题：

没有页面缓存、不能传递属性、脱离 JSX 的动态加载和过滤器实现等，这些问题尤其在移动端表现问题更多。

解决方法：

React-Keeper，一个比 React-Router 更灵活、更适用于移动端、路由功能更健壮的框架，React-Keeper 除了基础功能更强大以外，特别对移动 APP 的路由做了增强，能够满足更丰富的移动端场景。

主要特性：

1. 可扩展路由

2. 缓存：

1> catch 属性：

2> catchLink 组件：Detail

3> 标签化过滤器：Route 支持两类过滤器：绑定过滤器、解绑过滤器。

4> 标签化动态加：{

System.import('../Products.js').then((Products)=>{

callback(Products)

})

} } path='/products'>

5> 灵活的配置

区别

最后，再解释一下关于 react-router，react-router-dom，react-router-native，react-router-redux，react-router-config 的区别。

react-router——React Router 核心

react-router-dom——用于 DOM 绑定的 React Router，它与 react-router 的区别，是它比 react-router 多出了

这样的 DOM 类组件。

react-router-native——用于 React Native 的 React Router，用于移动应用的开发环境。

react-router-redux——React Router 和 Redux 的集成，Redux 去管理你的应用状态（state），使用 React Router 去管理路由，react-router-redux 库可以协调这两个库。

react-router-config——静态路由配置的帮助助手。

— END —

别忘了给作者：崔园园点赞呦！

有什么想对作者说的吗？快来留言吧！