从 React Router 谈谈路由的那些事

时间 2019-11-21

原文原文链接

React Router 是专为 React 设计的路由解决方案，在使用 React 来开发 SPA （单页应用）项目时，都会须要路由功能，而 React Router 应该是目前使用率最高的。html

React Router 并非 Facebook 的 React 官方团队开发的，可是听说有官方人员参与开发。React Router 的设计思想来源于 Ember 的路由，若是原来有用过 Ember 的路由，那么应该对 React Router 不会陌生。前端

什么是路由？

对于没有开发事后端，也没有开发过 SPA 的前端来讲，「路由」这个名词可能会让人比较困惑，这里的路由并非指「硬件路由」，也不是网络七层协议中的「网络层路由」，可是其思想原理是同样的。我尽可能简单通俗的介绍一下。react

假如咱们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：git

http://10.0.0.1/

http://10.0.0.1/about

http://10.0.0.1/concat

那么其路径就分别是 /，/about，/concat。github

当用户使用 http://10.0.0.1/about 来访问该页面时，Web 服务会接收到这个请求，而后会解析 URI 中的路径 /about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是经过「路由」来完成的。后端

前端路由

前端的路由和后端的路由在实现技术上不同，可是原理都是同样的。在 HTML5 的 history API 出现以前，前端的路由都是经过 hash 来实现的，hash 能兼容低版本的浏览器。若是咱们把上面例子中提到的 3 个页面用 hash 来实现的话，它的 URI 规则中须要带上 #。浏览器

http://10.0.0.1/

http://10.0.0.1/#/about

http://10.0.0.1/#/concat

Web 服务并不会解析 hash，也就是说 # 后的内容 Web 服务都会自动忽略，可是 JavaScript 是能够经过 window.location.hash 读取到的，读取到路径加以解析以后就能够响应不一样路径的逻辑处理。服务器

history 是 HTML5 才有的新 API，能够用来操做浏览器的 session history (会话历史)。基于 history 来实现的路由能够和最初的例子中提到的路径规则同样。网络

http://10.0.0.1/

http://10.0.0.1/about

http://10.0.0.1/concat

用户可能都察觉不到该访问地址是 Web 服务实现的路由仍是前端实现的路由。session

从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，而后服务器再响应请求，这个过程确定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来讲会有至关大的提高。

说了这么多的「路由基础」，该回头来讲说 React Router 了。

配置路由

使用 React Router 来配置上面例子中的三个页面，每一个页面分别对应着一个 React Component。

/about 页面的入口文件 about.js

import React from 'react';

class About extends React.Component {
componentDidMount () {
console.log('mount');
}

componentWillUnmount () {
console.log('un mount');
}

render () {
return (
<h3>This is About page.</h3>
);
}
};

export default About;

/concat 页面的入口文件 concat.js

import React from 'react';

const Concat = () => {
return (
<h3>This is Concat page.</h3>
);
};

export default Concat;

/ 首页对应的是 app.js，它也是整个 React Component 的入口文件。

import React from 'react';
import {Link} from 'react-router';

class App extends React.Component {
render () {
return (
<div>
<h1>React Router Demo</h1>
<hr />
<p>
by <a href="http://stylechen.com/" target="_blank">stylechen.com</a>
</p>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/concat">Concat</Link></li>
<li><Link to="/list/001">List 001</Link></li>
<li><Link to="/list/002">List 002</Link></li>
</ul>
{this.props.children}
</div>
)
}
};

export default App;

app.js 中的 Link 组件是 React Router 提供的组件，用于连接到相应页面。若是直接使用 a 标签的话至关于页面跳转了，而使用 Link 只是应用内的路由跳转，页面跳转意味着先从新加载整个页面，而后才是应用内部的路由跳转。

index.js 中包含了 route 的配置，同时在该文件中对 React Component 进行 render。

import React from 'react';
import ReactDOM from 'react-dom';

import App from './component/app';
import About from './component/about';
import Concat from './component/concat';
import List from './component/list';

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

const router = (
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="concat" component={Concat} />
<Route path="list/:id" component={List} />
</Route>
</Router>
);

ReactDOM.render(
router,
document.getElementById('root')
);

Route 组件就是用于配置路由，path 属性用于配置路径，component 就是对应的 React Component。

Route 组件支持嵌套，嵌套时子组件的路径能够继承父组件的路径，上面的 about 嵌套后就成了 /about，固然也能够直接以根路径为开头。

此时再看看 app.js 中的 this.props.children，About 和 Concat 两个页面组件其实就是以这种形式插入到父组件中，只是插入的时候用 React Router 提供的组件再包装了一下使它们能够支持路由。

Router组件还有一个重要的属性，那就是history，这能够配置使用history来实现路由，若是没有配置这个属性则默认使用hash。

路由参数

假如咱们有不少 list 页面，这些页面除了动态内容不一样，其余的页面部分都相同，这个时候须要怎么配置路由和组件呢？

这种场景就须要用到路由的参数功能，增长一条包含参数的路由配置。

import List from './component/list';

注意 path 属性中的 :id 就是该路由的参数（param）。再来看看 List 页面的组件。

/list 对应了 list.js

import React from 'react';

class List extends React.Component {
render () {
return (
<div>
<h3>This is List page.</h3>
<p>The list page id is 
<b style={{color: 'red'}}>{this.props.params.id}</b>
</p>
</div>
);
}
};

export default List;

在 List 组件中，能够直接经过 this.props.params.id 来访问实际的参数值（这里的id key 就和定义路径的 :id 相对应），React Router 将路由的数据都经过 props 传递给了页面组件，这样就能够很是方便的访问路由相关的数据了。

组件的生命周期

每一个 React Component 都有生命周期，按照常规的策略，当调用父组件的 render 的时候，会将全部的页面子组件也进行 render，这种逻辑显然不合理了。那么当一个 React 的应用有了路由功能后，它的生命周期会如何处理呢？

当切换路由的路径的时候才去 render 对应的页面组件，给 About 绑定两个组件装载和卸载的事件，就能够测试出来了。

importReactfrom'react';

classAboutextendsReact.Component{

componentDidMount(){

console.log('mount');

}

componentWillUnmount(){

console.log('un mount');

}

render(){

return(

ThisisAboutpage.

);

}

};

exportdefaultAbout;

在切换到 /about 页面的时候，会打印出 mount，而当离开页面的时候会打印出 un mount。路由的这种进入时装载组件离开时卸载组件的策略就能够作到合理利用「资源」，不会一下把全部的组件都装载进来使内存占用飙升，也不会离开时没有卸载而时内存泄漏。

React Router 还有不少比较方便 API，这里不一一列举，经过上面的文章基本能覆盖到常规的使用场景了，想了解更多使用方面查看项目主页。

本文的 demo 代码都已经托管在 github 上了，能够本身下载到本地浏览。