ReactRouter实现原理解决了什么问题

jiezi

6 年前

首先，它搭配 React 组件，可以组织 React 组件结构代码，授权路由的控制。应该展示什么样的组件，通过 React-Router 去匹配它。

首先，应该下载该 npm 包，这样引入项目工程里面，才可以引用 react-router 提供的 API。

// 有两种方式
npm install --save react-router 

yarn add react-router

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

// Router、Route、Switch 各自做了什么事？

首先它们都是基于 React.createElement 构建，也就是 JSX 的组件的路由，至于 Router、Route、Switch 各自做了什么。去看官方文档，里面描述了每一个组件路由做了什么事。可以去 npm、也可以去 github、也可以去官网去看。

<Route> 是 React-router 最重要的组件，路由最重要的职责就是渲染 UI，但有一个条件 location 变量，要匹配 route’s 路径。路径一匹配，传递进的组件就可以得到渲染。只要整个应用的 location 匹配了路由路径，你的组件就会渲染。

<Route /> 有三种方式去渲染传递进的组件。


<Route component match location history />
<Route children />
<Route render />
<Route sensitive path="/one" component={Home} />

匹配 location 路径，渲染对应的组件，返回就是对象。

React-Router 解决了什么问题？