react-router

1.安装

npm i react-router-dom

跳路由的方法

(1).NavLink

• 正在热映
• state传参同query差不多，只是属性不一样，而且state传的参数是加密的，query传的参数是公开的，在地址栏

  query方法传参

  <Link to={{ pathname: ' /user' , query : { day: 'Friday' }}}>
  
  获取的方式
  
  this.props.location.query.day
  

  state方法传参

  <Link to={{ pathname : ' /user' , state : { day: 'Friday' }}}>
  

  获取方式

  this.props.location.state.day
  

  (2)通过js方法

  （1） this.props.history.push({ pathname : '/user' ,query : { day: 'Friday'} })
  user页面获取参数：this.props.location.query.day
  
  （2）this.props.history.push({ pathname:'/user',state:{day : 'Friday' } })
  //user页面获取参数     
  this.props.location.state.day
  

  (3)

• {this.state.cityName}

• 	jumpPage(){
  	    console.log(this.state.cityName);
  	    this.props.history.push({pathname:"/city",state:{cityName1:this.state.cityName}});
  	}
  

  (4)在路由表配置

  {
      path:"/detail/:id",
      component:Detail,
  }
  jumpDetail(data){
      console.log(data);
      this.props.history.push({pathname:`/detail/${data.id}`,state:{data1:data}}
  }
  

  获取参数用this.props.match.params.id
  注意： render方法渲染的时候js事件跳路由会受影响解决方法
  引入withRouter

  	import {BrowserRouter as Router,Route,NavLink,Switch,Redirect,withRouter} from "react-router-dom"
  

  抛出的时候调用的组件和接受数据的页面都调用withRoute(FirstPage)这样就可以获取到this.props
  (3)获取state传递的参数

  this.props.location.state
  

  2.详情见react-router那个网址

  https://reacttraining.com/react-router/web/api/Link/to-object
  

  3.设置样式 activeClassName

  render() {
  return (
    <Route>
      <NavLink to="/home"  activeClassName="active">首页 </NavLink>
      <NavLink to="/huiyuan" activeClassName="active">会员 </NavLink>
      <NavLink to="/shop" activeClassName="active">购物车 </NavLink>
      <NavLink to="/myPage" activeClassName="active">我的 </NavLink>
    </Route>
  );
  }
  

  4.switch只要有一个组件符合就只会匹配到第一个，不往后查找

  5.路由的框架

  (1)引入路径

  import {BrowserRouter as Router,Route,NavLink,Redirect,Switch} from "react-router-dom"
  

  (2)引入路由表

  import RouterData from “./router/index”
  (3)return方法里面写

  <Router>
      <Switch>
          <Route path="/first" component={firstPage}></Route>
      </Switch>
  </Router>
  

  注意Router,Switch值引用一次就行 Redirect最好也只用一次写在最下面 NavLink,Route可以引用多次

  6.配置路由表

  (1)引入要展示的页面

  import Index from "../views/firstCom/index"
  import Login from "../views/firstCom/login"
  import Movie from "../views/secCom/movie"
  

  (2)定义一个变量抛出

  	let Router={
  	routes:[{
  	      path:"/index",
  	    component:Index,
  	    children:[
  	        {
  	        path:"/index/movie",
  	        component:Movie,
  	        children:[
  	            {
  	            path:"/index/movie/doing",
  	            component:Doing
  	        }, {
  	            path:"/index/movie/hot",
  	            component:Hot
  	        }
  	        ]
  	}]
  	    
  	}
  

  抛出:export default Router;
  7.引用的方法

  import RouterData from "./router/index"
  RouterData.routes可以获取到值对获取到的值进行遍历渲染出route
  

  渲染有两种方法

  1.使用于不用使用渲染子路由的时候

  <Route path={item.path} component={item.comonent}></Route>
  

  2.有子路由的时候用render方法可以直接把子路由的配置传递过去，子路由的时候直接可以用this.props.参数可以遍历渲染不用再引路由表
  == 注意： render方法渲染的时候js事件跳路由会受影响解决方法

  	引入withRouter import {BrowserRouter as Router,Route,NavLink,Switch,Redirect,withRouter} from "react-router-dom" 抛出的时候调用组件withRoute(FirstPage)==
  	
  	<Route path={item.path} render={()=>{
  	    return <item.component></item.component>
  	}} ></Route>
  

  给子路由传递参数的写法

  {RouterData.routes.map((item,index)=>{
         return <Route  key={index} path={item.path} render={()=>{
           if(item.children){
             return <item.component routes={item.children}></item.component>
           }else{
             return <item.component></item.component>
           }
         }}></Route>
       })}
  

  子路由接受的方法

  	let {routes}=this.props;
  

  通过route遍历就行

  8.封装公用的方法用于遍历路由表的数据生成

  	import React from "react";
  	
  	import { Route } from "react-router-dom";
  	
  	export default function (routers) {
  	console.log(routers);
  	return  routers.map((item,index)=>{
  	    return <Route key={index} path={item.path} render={()=>{
  	        if(item.children){
  	            return <item.component routeChild={item.children}></item.component>
  	        }else{
  	            return <item.component></item.component>
  	        }
  	    }}>
  	    </Route>
  	})
  	}
  

  调用的方法
  引入文件传入参数.

  如果是一级路由用routers.route
  如果是子路由用this.props.routeChild
  {RouterData(routeChild)}
  

  9.路由守卫

  (1).在要守卫的页面的render函数里面写

  if(!localStorage.getItem("user")){
      return <Redirect to="/login"></Redirect>
  }
  

  (2)定义一个高阶函数 抛出一个函数，函数里面的接受的参数是组件return一个组件

  	import React, { Component } from 'react'
  	import {Redirect} from 'react-router-dom'; 
  	 export default function(Com){
  	 return class  extends Component {
  		 render() {
    			  if(!localStorage.getItem("user")){
         		 return <Redirect to="/login" {...this.props}></Redirect>
      	}
      		return <Com {...this.props}/>
  	 }
  	}
  }
  

  调用的方法

  引入这个文件import HocData from "../hocData/routerHu";
  在export default那调用
  export default HocData(Home)
  

  按需加载组件

  function Loadable(path){  
  		return class extends React.Component{     
  		state={
      		 InitComponent:null
       			} 
       	 componentDidMount(){
          path().then(component=>{
              console.log(component);
              setTimeout(()=>{
          		this.setState({
              	InitComponent:component.default
         		 })
      	},3000)
      	 })
     		 }
        render(){
  		 	let {InitComponent}=this.state;
   			return InitComponent?<InitComponent />:<div>组件初始化状态</div>
       	}
   		}
  	}
  

  路由的配置

  let router={
  routes:[
      {
          path:"/home",
          component:Loadable(()=>import("../page/home"))    
      },{
          path:"/shop",
          component:Loadable(()=>import("../page/shop"))
      },{
          path:"/classData",
          component:Loadable(()=>import("../page/class"))
      },{
          path:"/detail",
          component: Loadable(()=>import("../page/detail"))
      },{
          path:"/my",
          component:Loadable(()=>import("../page/my"))
      }
  ]
  }