React-Router解决了什么问题?
首先,它搭配React组件,可以组织React组件结构代码,授权路由的控制。应该展示什么样的组件,通过React-Router去匹配它。
React-Router如何使用?
首先,应该下载该npm包,这样引入项目工程里面,才可以引用react-router提供的API。
//有两种方式
npm install --save react-router
yarn add react-router
React-Router核心的API
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路径,渲染对应的组件,返回就是对象。