共计 708 个字符,预计需要花费 2 分钟才能阅读完成。
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 路径,渲染对应的组件,返回就是对象。
正文完
发表至: javascript
2019-05-02