react系列---【react路由、UI库】

1.路由

安装

npm i react-router-dom --save

模式 HashRouter BrowserRouter

import {HashRouter,BrowserRouter} from "react-router-dom"

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>
  ,
  document.getElementById('root')
);

规则 Route

import {Route} from "react-router-dom"

 <Route exact strict path="/register" component={Register}></Route>
 <Route path="/index" component={Index}></Route>

Route 的属性 ：exact[是否精确匹配] 默认:false。 如果要精确匹配，需要设置exact 
strict:严格模式。 需要搭配exact使用。 默认是路径后可以加'/',也可以访问，加上严格模式，有'/'就不行 

出口 Switch

import {Switch} from "react-router-dom"

<Switch></Switch>

重定向 Redirect

import {Redirect } from "react-router-dom"

{/* 4.重定向 */}
 <Redirect to="/"></Redirect>

404处理

{/*5. 404第一种方式 */}
<Route path="/404" component={NotFound}></Route>
 <Redirect to="/404"></Redirect> 

{/* 404 第2种方式*/}
<Route component={NotFound}></Route>

路由导航 Link NavLink(exact activeClassName activeStyle)

<Link to="/search">搜索</Link>
<NavLink to="/search">搜索</NavLink>

高亮效果：

<footer className="index-footer">
  <NavLink to="/index/home" activeClassName="select">首页</NavLink>
  <NavLink to="/index/cate" activeClassName="select">分类</NavLink>
  <NavLink to="/index/shop" activeClassName="select">购物车</NavLink>
</footer>

<footer className="index-footer">
  <NavLink to="/index/home" activeStyle={{color:"orange"}}>首页</NavLink>
  <NavLink to="/index/cate" activeStyle={{color:"orange"}}>分类</NavLink>
  <NavLink to="/index/shop" activeStyle={{color:"orange"}}>购物车</NavLink>
</footer>

编程式导航：

push(){
  this.props.history.push("/search") //跳转到搜索
}
replace(){
  this.props.history.replace("/search") //跳转到搜索
}
goBack(){
  this.props.history.go(-1)//返回
}

注意：

1.编程式导航 push【添加新的历史记录】 replace【用新的历史记录替换当前历史记录】
2.如果一个组件是路由组件，可以直接使用编程式导航；如果不是路由组件，
    那么
    1.通过withRouter()变成路由组件；
    2.将路由组件的props通过{...this.props}传递过来

withRouter

import React, { Component } from 'react'
//引入withRouter
import {withRouter} from "react-router-dom"
class BackBtn extends Component {
    goBack(){
        console.log(this.props);
        this.props.history.go(-1)
    }
    render() {
        return (
            <button onClick={()=>this.goBack()}>封装的返回</button>
        )
    }
}
//使用
export default withRouter(BackBtn)

路由传参[1. ? ;2.动态路由 ]

1.search传参 【？】

 <Link to={`/cateList?id=1&name=222`}>{item.name}</Link>

取参数：

1.原生js

componentDidMount(){
        let str=this.props.location.search;//"?id=2&name=qqq&age=122" --{id:"2",name:"qqq",age:"122"}
        // 1.利用原生js
        
        let substr=str.slice(1);//"id=2&name=qqq&age=122"
        let arr=substr.split("&");// ['id=2','name=qqq','age=122']
        let result={}
        arr.forEach(item=>{
            let subArr=item.split("=");//["id","2"]
            result[subArr[0]]=subArr[1]  
        })
        console.log(result);
    }

2.node questring

import querystring from "querystring"

componentDidMount(){
        let str=this.props.location.search;//"?id=2&name=qqq&age=122" --{id:"2",name:"qqq",age:"122"}
        
        // 2.node querystring.parse()
        let result=querystring.parse(str.slice(1))
        console.log(result);


    }

3.URLSearchParams

componentDidMount(){
        let str=this.props.location.search;//"?id=2&name=qqq&age=122" --{id:"2",name:"qqq",age:"122"}

        // 3.原生js
        let params=new URLSearchParams(str);
        console.log(params.get("id"));
        console.log(params.get("name"));

    }

2.动态路由传参

 <Link to={`/detail/1`}>{item.name}</Link>

<Route path="/detail/:id" component={Detail}></Route>

let id=this.props.match.params.id

路由懒加载

1.通过React.lazy()引入组件

let Login=React.lazy(()=>import("./pages/Login/Login"))
let Index=React.lazy(()=>import("./pages/Index/Index"))

2.需要将规则包裹在React.Suspense 组件中，fallback必填

// 2.React.Suspense  fallback必须的
    <React.Suspense fallback={<div>正在加载。。。</div>}>
      {/* 2.路由出口 */}
      <Switch>
      
        <Route exact path="/" component={Login}></Route>
        <Route path="/index" component={Index}></Route>
       
      </Switch>
    </React.Suspense>

登录拦截 ：

1.登录成功存个值

login = () => {
      console.log(this.state.user.type);
    //   1.登录成功存登录信息
      sessionStorage.setItem("islogin",1)
  };

2.封装一个组件PrivateRoute,如果要拦截，就使用PrivateRoute书写规则。

import React, { Component } from 'react'
import {Redirect, Route} from "react-router-dom"
export default class PrivateRoute extends Component {
    constructor(){
        super()
        this.state={
            islogin:sessionStorage.getItem("islogin") //'1' null
        }
    }
    render() {
        return (
            <div>
                {this.state.islogin?<Route {...this.props}></Route>:<Redirect to="/"></Redirect>}
            </div>
        )
    }
}

3.使用

<Route exact path="/" component={Login}></Route>
<Route exact strict path="/register" component={Register}></Route>
<PrivateRoute path="/index" component={Index}></PrivateRoute>
<PrivateRoute path="/cateList" component={CateList}></PrivateRoute>
<PrivateRoute path="/detail/:id" component={Detail}></PrivateRoute>
<PrivateRoute path="/search" component={Search}></PrivateRoute>

独享守卫：

{/* 路由独享守卫 */}
  <Route path="/index/shop" render={(props)=>{
      console.log(props);
      let type=sessionStorage.getItem("type")
      if(type==='1'){
        return <Shop {...props}></Shop>
      }else{
        return <div>你没有权限</div>
      }

    }}></Route>

2.UI库

全局引入：

1.安装

npm i yarn -g
yarn add antd

2.引入css [reset.css]

@import '~antd/dist/antd.css';

3.使用组件

import { Button ,Pagination} from 'antd';

<Button type="primary">Button</Button>
<Pagination total={100}></Pagination>

2.按需引入

1.手动引入

import "antd/es/button/style/css"
import "antd/es/pagination/style/css"
import { Button ,Pagination} from 'antd';

2..babel-plugin-import [推荐]

1.安装依赖

npm i babel-plugin-import --save

2.在 src 下创建 .babelrc 文件，内容如下:

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    ["import", { "libraryName": "antd", "style": "css" }] 
  ]  
}

3.通过命令导出 webpack 配置文件 npm run eject

git add . 
git commit -m "123"
npm run eject  //y

4.修改config/webpack.config.js

5.修改package.json

6.重启项目

npm start

7.使用

import React, { Component } from "react";
//1.引入Button的样式和组件
import { Button } from "antd";

//1.引入Pagination的样式和组件
import { Pagination } from "antd";

export default class Mine extends Component {
  render() {
    return (
      <div>
        <h1>this is Mine </h1>
        <div style={{ textAlign: "center" }}>
          {/* 2.使用 */}
          <Button type="primary">测试按钮</Button>
          <Pagination></Pagination>
        </div>
      </div>
    );
  }
}

此时不需要引入css，也可以使用。