React-Router实现原理,解决了什么问题?

React-Router解决了什么问题?

首先,它搭配React组件,能够组织React组件结构代码,受权路由的控制。应该展现什么样的组件,经过React-Router去匹配它。react

React-Router如何使用?

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

//有两种方式
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、也能够去官网去看。github

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

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

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

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

相关文章
相关标签/搜索