react路由基础

https://reacttraining.com/react-router/
npm i react-router-dom -S (只需要安装react-router-dom 就行 )

react router 中所有的 都是组件
路由中常用的组件

HashRouter、BrowserRouter 顶层组件(或 用其一即可)
import { HashRouter as Router } from ‘react-router-dom’;在根路由组件中引入

只要这也项目想要使用路由。就需要 HashRouter、BrowserRouter 放在顶层（是路由组件的祖先 组件）
Link NavLink(active类) 跳转（vue router-link）
Route 渲染组件
Switch
Redirect 重定向（登录鉴权）

只要是路由组件 渲染的 组件 props会灌入一些路由相关的属性和方法

如何定义路由组件：

Route 用于渲染 普通组件的 此时 普通组件就会变成路由组件（props中就会灌入 路由相关的参数）

  <Route path="/home" component={Home}/>

Link NavLink 跳转路由

<Link to="/home">首页</Link>
<NavLink to="/home">首页</NavLink>  //自动加一个active类

Route Redirect 解析 默认是贪婪模式 （每一个都会解析 执行） 如何变成非贪婪模式

  <Switch> 用于包裹 Route Redirect 包裹后 就会变成非贪婪模式
  从上往下执行，只要有一个匹配了下面就不匹配（只匹配一个）

  注意：如果加了Switch 后，
  Redirect 应该 写在后面（写在前面 后面的Route 不解析了）导致没有组件渲染
  404 Redirect 应该放在最后

动态路由

定义：
<Route path="/newDetail/:id" component={ NewDetail  }/>
跳转时:
  <Link to="/newDetail/1">到新闻1</Link>
  <Link to="/newDetail/2">到新闻2</Link>
获取参数：
  this.props.match.params.id