react-路由-UI

react-router-dom路由模块(重点)

下载

cnpm i react-router-dom@5.3.0 -S

路由实现流程

路由模式

• HashRouter:访问地址带#号
• BrowserRouter:访问地址不带#号

// 导入路由模式
import {BrowserRouter} from 'react-router-dom'
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

路由出口[Switch]

import React from 'react'
import {Switch} from 'react-router-dom'
import Home from './pages/router/Home'
export default function App() {
  return (
    <>
      {/* 路由出口 */}
      <Switch>
          <Home   />
      </Switch>
    </>
  )
}

路由规则[Route]

• path:访问路径
• component:组件
• exact:精准匹配
• strict:严格模式, 需要和exact一起使用
• render:渲染组件 callback

import {Switch,Route} from 'react-router-dom'
      <Switch>
        <Route path="/" exact={true} strict component={Home}></Route>
        <Route path="/login" component={Login}></Route>//有二级路由不用exact
      </Switch>
    </>

404路由

//引入404组件
{/* 访问不存在的路径* */}
<Route path="*"  component={NotFound}></Route>

路由导航

Link

import {  Link } from 'react-router-dom';
<Link to="/">首页</Link>  | 
<Link to="/login">登录</Link> | 
<Link to="/goods">商品列表</Link> |  

NavLink

• to:去往的路径地址
• exact:精准匹配
• activeClassName:选中的样式
• activeStyle:选中的行内格式

import { NavLink } from 'react-router-dom';
<NavLink to="/" exact activeClassName="select">首页</NavLink>
<NavLink to="/login" exact activeClassName="select">登录</NavLink>
<NavLink to="/goods" exact activeClassName="select">商品列表</NavLink>

<NavLink to="/" exact activeStyle={{background:'purple',color:'white'}}>首页</NavLink>
<NavLink to="/login" exact activeStyle={{background:'purple',color:'white'}}>登录</NavLink>
<NavLink to="/goods" exact activeStyle={{background:'purple',color:'white'}}>商品列表</NavLink>

编程式导航

路由组件

• 被路由规则包裹的组件为:路由组件

this.props.history

• push 返回:返回上一级

<button  onClick={()=>this.props.history.push('/goods')}>商品列表</button>

• replace 返回:返回上上一级

<button  onClick={()=>this.props.history.replace('/goods')}>商品列表</button>

• go 前进 刷新 后退 参数 : 1 2 -1 -2

<button  onClick={()=>this.props.history.go(1)}>前进</button>
<button  onClick={()=>this.props.history.go(-1)}>后退</button>

• goBack 返回

<button  onClick={()=>this.props.history.goBack()}>返回</button>

普通组件

• 没有被路由规则包裹的组件为:普通组件

withRouter()

• 将普通组件变为路由组件

import React, { Component } from 'react'
import {withRouter} from 'react-router-dom'
// 普通类组件
 class GoBack extends Component {
    render() {
        return (
                <button onClick={()=>this.back()}>公共返回</button>
            </>
        )
    }
    // back(){
    //this.props.history.goBack()
    //console.log(this);//普通组件中this.props为空。
    // }
}
//withRouter为一个高阶组价，它接收一个普通组件，返回一个路由组件。
export default withRouter(GoBack)

重定向[Redirect]

import { Redirect } from 'react-router-dom';
{/* 重定向 */}
<Redirect path="*"  to="/"></Redirect>

search传参

URLSearchParams

let search = this.props.location.search;//?id=1&name=zs
let result  = new URLSearchParams(search.slice(1));
console.log(result.get('id'));
console.log(result.get('name'));

querystringify

let search = this.props.location.search;//?id=1&name=wangminyu
let result = querystringify.parse(search.slice(1));
 console.log(result);

state

//传参：
<NavLink to={{pathname:'detail',state:{id:1,name:'王敏羽'}}}>商品详情</NavLink> 
//接参
this.props.location.state

动态路由传参

• :占位符

修改路由配置规则
{/* 设置动态路由传参  :占位符 */}
 <Route path="/detail/:id/:name"  component={Detail}></Route>

<NavLink to="/detail/1/zs">商品详情</NavLink> 

//接参
this.props.match.params

总结：

this.props.history    #编程式导航的方法
this.props.location		#获取search传递
this.props.match			#获取动态路由传参

路由懒加载

• React.lazy

// 懒加载模式
let Home = React.lazy(()=>import('./pages/router/Home'));
let Login = React.lazy(()=>import('./pages/router/Login'));
let Goods = React.lazy(()=>import('./pages/router/Goods'));
let Detail = React.lazy(()=>import('./pages/router/Detail'));

• React.Suspense 失败的回调中渲染备用的UI。

<React.Suspense fallback={<h2>loading...</h2>}>
  <Switch>
  	<Route></Route>
    ...
  </Switch>
</React.Suspense>

路由嵌套

使用基本的路由步骤(一级和二级路由):
1.组件引入    懒加载(React.lazy(()=>import('组件路径 '))
2.路由出口		Switch
3.路由配置规则		Route

import React, { Component } from 'react'
import {Switch,Route,NavLink,Redirect} from 'react-router-dom'
// 引入二级路由组件
let PhoneLogin = React.lazy(()=>import('../../views/PhoneLogin'))
let UserLogin = React.lazy(()=>import('../../views/UserLogin'))

export default class Login extends Component {
    render() {
        return (
            <div>
                {/* 设置二级路由导航 */}
		<NavLink to="/login/phoneLogin">手机号登录</NavLink>
		<NavLink to="/login/userLogin">会员登录</NavLink>
                
{/* 二级路由出口 */}
<Switch>
{/* 设置二级路由配置规则 */}
<Route path="/login/phoneLogin"   component={PhoneLogin}></Route>
<Route path="/login/userLogin"   component={UserLogin}></Route>
{/* 二级路由重定向 */}
<Redirect path="/login" to="/login/phoneLogin"></Redirect>
</Switch>
            </div>
        )
    }
}

路由导航守卫

• 在react中没有路由导航守卫，配合路由规则render属性。

router/index.js
import React from 'react'
import {Switch,Route,Redirect,withRouter} from 'react-router-dom'

// 导入组件
const Home = React.lazy(()=>import('../pages/Home'))
const Login = React.lazy(()=>import('../pages/Login'))
const GoodsDetail = React.lazy(()=>import('../pages/GoodsDetail'))
const User = React.lazy(()=>import('../pages/User'))
const NotFound = React.lazy(()=>import('../pages/NotFound'))

// 设置路由规则
const routes = [
    // 重定向
    {
        path:'/',//路径
        redirect:'/home',//重定向
        exact:true,//是否使用精准匹配  true:是  false:否
    },
    // 设置首页规则
    {
        path:'/home',//路径
        component:Home,//组件
        exact:true,//是否使用精准匹配  true:是  false:否
        isLogin:false,//是否需要登录验证  true:是 false:否
        meta:{title:'首页'},//设置路由元信息
    },
    // 设置登录规则
    {
        path:'/login',//路径
        component:Login,//组件
        exact:true,//是否使用精准匹配  true:是  false:否
        isLogin:false,//是否需要登录验证  true:是 false:否
        meta:{title:'登录'},//设置路由元信息
    }
]

// 实现路由规则
function RouterView(){
    return (
        // 路由出口
        <Switch>
            {/* 路由配置规则 */}
           {routes.map(item=>{
                //判断每一项中是否有component
                if(item.component){
                    // 有component
 return  <Route key={item.path} path={item.path} exact={item.exact} 
render={()=>{
             // 1.设置路由元信息
             if(item.meta) document.title =  item.meta.title
             // 2.判断是否需要登录
             if(item.isLogin){
             // 需要登录验证
             if(!sessionStorage.getItem('user')){
             // 没有用户信息
             return <Redirect to="/home"></Redirect>
                          }
                     }
             // 不需要登录验证
             const Component = withRouter(item.component)
             // 路由组件
             return <Component></Component>
                }}></Route>
                }
// 没有component,即是重定向
return <Redirect key={item.path} path={item.path} to={item.redirect} exact={item.exact}></Redirect>
            })}
 </Switch>
    )
}
export default RouterView

antd(UI库)

网址:https://ant.design/docs/react/introduce-cn

介绍

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

安装

cnpm install antd --save

引入

index.js
// 引入antd
import 'antd/dist/antd.css';

使用

import React, { Component } from 'react'
import { Button,Divider } from 'antd';
export default class Home extends Component {
    render() {
        return (
            <div>
                <Button type="primary">Primary Button</Button>
                <Button>Default Button</Button>
                <Button type="dashed">Dashed Button</Button>
                <Divider />
                <Button type="text">Text Button</Button>
                <Button type="link">Link Button</Button>
            </div>
        )
    }
}

安装移动端

网址: https://mobile.ant.design/
cnpm install --save antd-mobile@next

安装图标库

cnpm install --save antd-mobile-icons

案例

import React, { Component } from 'react'
import { Swiper, Toast,Tabs ,Space} from 'antd-mobile'
import { AntOutline,EyeInvisibleOutline } from 'antd-mobile-icons'
import './home.css'
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        className="content"
        style={{ background: color }}
        onClick={() => {
          Toast.show(`你点击了卡片 ${index + 1}`)
        }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ))
export default class Home extends Component {
    render() {
        return (
            <div>
                <Swiper autoplay>{items}</Swiper>
                <Tabs>
                    <Tabs.Tab title='水果' key='fruits'>
                        菠萝
                    </Tabs.Tab>
                    <Tabs.Tab title='蔬菜' key='vegetables'>
                        西红柿
                    </Tabs.Tab>
                    <Tabs.Tab title='动物' key='animals'>
                        蚂蚁
                    </Tabs.Tab>
                </Tabs>
                <Space wrap style={{ fontSize: 24 }}>
                    <AntOutline color='#76c6b8' />
                    <AntOutline color='pink' />
                    <AntOutline color='black' />
                    <AntOutline color='yellow' />
                </Space>
                <EyeInvisibleOutline />
            </div>
        )
    }
}

面试题

⚫ React-router和React-router-dom的区别?
⚫ Link和NavLink的区别?
⚫ 在react中hash模式和history模式的区别
⚫ 在react中路由传参是如何进行传递参数，什么是动态路由? ⚫ 在react中有哪些基本的路由组件?