$\color{CornflowerBlue}这是我参与「第四届青训营」笔记创作活动的的第五天$
伴随着青训营项目的推进，小编狂补react知识，接下来我就react路由以及组件展开讨论。文章内容如有不对，请各位看官多多指正，非常感谢。

文章目录

• 一. 对路由的基本使用
• 二. 路由组件与一般组件区别
• 总结

一. 对路由的基本使用

  React Router 是 导航组件 的集合，可与应用程序进行声明式的组合。无论是想为 Web 应用程序添加书签，还是在 React Native 中进行组件化导航，React Router 都可以在 React 的任何位置渲染使用。

1.1 react-router-dom 的理解
 1. react的一个插件库
 2. 专门用来实现一个SPA应用
 3. 基于react的项目基本都会使用到此库

1.2 react-router-dom 相关API
 内置组件
  1. <BrowserRouter>
  2. <HashRouter>
  3. <Route>
  4. <Redirect>
  5. <Link>
  6. <NavLink>
  7. <Switch>
 其他组件
  1. history对象
  2. match对象
  3. withRouter函数

1.3 路由的基本使用
 1. 安装路由的插件

npm i react-router-dom@5
//或者
yarn add react-router-dom@5

 2. 导入包并使用

import {
  BrowserRouter,
  Route,
  Switch,
  Redirect
} from 'react-router-dom'
//具体需要哪个用哪个

 3. 使用HashRouter或BrowserRouter包裹整个应用
  路由器分为两种：BrowserRouter和HashRouter。
  BrowserRouter和HashRouter的区别如下表。

	BrowserRouter	HashRouter
底层原理	使用的是H5的history API，不兼容IE9及以下版本	使用的是URL的哈希值
path表现形式	路径中没有# 例如：localhost:3000/demo/test	路径包含# 例如：localhost:3000/#/demo/test
刷新后对路由state参数的影响	没有任何影响，因为state保存在history对象中	刷新后会导致路由state参数的丢失

 4. Link 和 NavLink 的区别
  两者都实现路由的跳转。
  点击<Link>时，url会更新，组件会被重新渲染，但页面不会重新加载。使用to链接组件时,它的值既可是字符串，也可以是location对象(包含pathname、search、hash、与state属性)，如果其值为字符串，将会被转换为location对象。

<Link to={
   { 
     pathname: '/courses',
     search: '?sort=name',
     hash: '#the-hash',
     state: { fromDashboard: true }
   }
}/>

  点击<NavLink>时，会在匹配上当前的url的时候给已经渲染的元素添加参数。

<NavLink to="/..." activeStyle={{fontWeight: 'bold', color: 'red'}} />

 5. route的作用和使用
  作用：决定路由匹配规则
  使用：<Route path="/xx/xx" component={组件}></Route>
 6. exact实现精准匹配
  使用：<Route path="/login" exact component={Login} />

二. 路由组件与一般组件区别

	路由组件	一般组件
写法	<Route path="/demo" component={Demo}/>	<Demo/>
存放位置	pages文件夹下	components文件夹下
接收到的props	接收到三个固定的属性(history, location, match)	写组件标签时传递什么，就能收到什么

总结

• 路由学到这我感觉才刚入门，我是边学边做小组里的项目，学到NavLink的使用以及封装的时候我就自己试着将项目里的头部导航给做好了，虽然大体的样子是出来了，但是在使用的时候还是有些细微的问题，只不过感觉像是css样式的问题。
• 下节写NavLink的相关操作和Switch的使用，以及页面跳转Redirect的使用以及相关问题；后面还会涉及到组件传递params、search、state参数等问题。与大家一起学习。