安装路由的环境

    1.yarn add react-router-dom
    2.在入口文件(index.js)处引入
        import{BrowserRouter as Router} from "react-router-dom"
    3.两种模式(hash模式,历史纪录模式)
        hash模式:后面带#号的   HashRouter
            拿到#号后面的值:location.hash
        历史纪录模式: BrowserRouter(原理，window.history.State)
        import {BroswerRouter as Router} from "react-router-dom"
    4.使用<Router><App/></router> 将其包起来,通过context传到他下面的所有子孙组件里面
    5.引图片(public可以直接引入，不需要require，src下面的图片再用require)
    6.引入sass 
    	yarn add node-sass sass-loader
    7.阿里矢量图标库如何使用：
    	font放在public,在public里面的index.html下面引入iconfont.css
    8、移动端适配
    	html{font-size:13.33333vw}
    	body{font-size:14px}



    实例代码：
    
        ReactDOM.render(
            <Router> 
                <App />
            </Router>
    , document.getElementById('root'));

切换路由

    1.<Route path="/路径" component={组件名}></Route>
    2.NavLink带样式:点击后会出现active的class类名(在index.js里面设置css样式)
    Link不带样式
    3.路由切换组件三个属性
    history 编程式导航
    location(search,state)
    match (params)

默认主页

    exact精确匹配
    <Redirect from="/" to="/one" exact></Redirect>

引入redirect(重定向)
      

```javascript
<Switch>
    <Route path="/one" component={One} />
    <Route path="/two" component={Two} />
    <Redirect from="/" to="/one" exact></Redirect>
    <Route component={notFound}/>
  </Switch>

404页面

<Route component={}>
但是此时404页面会出现在所有页面，，解决办法是引入Switch，同时要将Route404这个组件写在最下面

轮播(只有当数据请求到了之后,财经数据发送过去，所以此处做了一个三元运算符进行判断)
实例代码：

请求数据的组件：
import React, { Component } from 'react'
import MySwiper from "../myswiper"
export default class Test2 extends Component {
constructor(props){
super(props)
this.state ={
list:[]
}
}
//这个组件的做用就是异步拿到数据，传给子组件
componentDidMount(){
this.getData()
}
getData(){
fetch("http://localhost:4000/list").then((res)=>res.json()).then((res)=>{
this.setState({
    list:res
})
})
}
render() {
return (
<div>
    test2
    {this.state.list.length>0?
    <MySwiper list={this.state.list} />:""}
</div>
)
}
}

lunbo：

import React, { Component } from 'react'
import Swiper from 'swiper'
import "swiper/css/swiper.css"
export default class Test extends Component {
    constructor(props){
        super(props)
        this.state ={
            list:[]
        }
    }
componentDidMount(){  
    this.getData()
    // new Swiper ('.swiper-container', {//如果内容是静态的，可以这样做
        
    //     loop: true, // 循环模式选项
        
    //     // 如果需要分页器
    //     pagination: {
    //       el: '.swiper-pagination',
    //     }
       
    //   })     
}
componentDidUpdate(){
    //说明数据变化了，异步数据回来
    new Swiper ('.swiper-container', {
        
        loop: true, // 循环模式选项
        
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        }
       
      })     
}
getData(){
        fetch("http://localhost:4000/list").then((res)=>res.json()).then((res)=>{
            this.setState({
                list:res
            })
        })
}
render() {
    return (
        <div>
            {this.state.list.length}
            <div className="swiper-container">
                    <div className="swiper-wrapper">
                       {
                           this.state.list.map((item)=>{
                                
                           return <div className="swiper-slide" key={item.bannerId}>
                                        {item.name}
                                  </div>
                           })
                       }
                    </div>
                    <div className="swiper-pagination"></div>
                </div>
        </div>
    )
}

}

withRouter(在路由组件传值时一定要引入withRouter)

监控路由的变化，默认情况下必须经过路由匹配渲染的组件才存在this.props,才拥有路由参数，执行this.props.history.push('/detail')跳转到对应路由的页面，然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，将react-router的history、location、match三个对象传入props对象上，此时就可以使用this.props。
引入：import{withRouter} from “react-router-dom”
导出：export default withRouter(App);
解决刷新出现react的默认标题栏
刷新时调用一次   在constructon里有调用了一此函数，将this.props.location.pathname传入，就不会刷新产生react
当引入withRouter后就会出现三个参数，location,match,history

监控路由参数的变化(路由传参)

:type传参
取得参数：this.props.match.params.type

useState（新特性） hook

let [a,setA]  = userState(1)初始值赋值给a
前面的两个参数为自定义的
let [数据，修改数据的函数] = useState('可以传默认值')

编程式导航：this.props.history.push listen go ...适合做编程式导航和及监听路由的变化("/list/"+type)
match  主要是用于取路由的参数  this.props.match.params.参数
location    location.pathname  还能查询location.search 就是？号后面的参数，查询字符串
###qs包
qs这个包可以将这个参数（查询字符串）拆分,?a=xxx&b=xxx 
		import qs from "queryString"  引入包
		location.search.slice(1)去问号
		qs.parse(location.search.slice(1))    {a:xxx,b:yyyy}
location.state 可以传递多个值  console.log(this.props.location.state)

无状态组件的路由传值（第一种方法）

组件1：
	<div className="App">
        <NavLink to="/list/users">users</NavLink>
        <NavLink to="/list/goods">goods</NavLink>
        <Route path="/list/:type" component={List}></Route>
    </div>
组件2：
	1.此时在componentDidMount打印this.props  会出现三个参数(match,history,location)
	2.使用match里面的this.props.match.params.type拿到变化的路由参数
	3.在state中设置参数和数据的初始值  
		this.state={list:[],type=""}
	4.在componentDidMount(){}在组件加载的时候请求数据，分别调用getData方法，只走一次
	5.在componentDidUpdate(){}在组件变化时监听路由变化，监听变化
	6.因为在componentDidUpdate中监听了路由的变化，并调用了getdata方法修好改了type值，
		#####所以一定要判断一下两次切换的路由的值不相等，否侧会不停的请求数据
	7.在setState中一定要修改type值否则数据无法切换，值无法拿到无状态组件的路由传值的第二种方法

function App(props) {
    console.log(props)
  return (
    <div className="App">
    //第一种方法：
        {/* <NavLink to="/list/users">users</NavLink>
        <NavLink to="/list/goods">goods</NavLink> */}
    //第二种方法：
        <button onClick={()=>{props.history.push("/list/user")}}>user</button>
        <button onClick={()=>{props.history.push("/list/goods")}}>goods</button>
        <Route path="/list/:type" component={List}></Route>
    </div>
  );
}

类组件

​ 第一种方法

第二种方法

接收的组件使用：

console.log(this.props.match.params.type)
1、NavLink  activeClassName 可以指定当前路由的类名
2、 this.props.history.push(“/list”,{type})
第二个组件console.log(this.props.location.state.type)
params 默认值 是一个{}  state的默认值是undefined
state传值(传多个值)，params传值，(一个参数)
NavLink Link  除了可以 to=“字符串”，还可以写对象to={{pathName:’/list’}}
所以此时做判断
		if(!this.props.location.state.type) return

权限路由：

   <Route path="/two" render={(props)=>{return sessionStorage.getItem('user')?<Two {...props}/>:<Redirect to="/login">}}></Route>
​	redirect组件    to属性可以传值 
​	to={{pathname:’/login},state:{key:value}}

​