路由与高阶组件

最新推荐文章于 2024-10-04 06:11:34 发布

乐意-李

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量525

点赞数

文章标签： vue react html web

本文链接：https://blog.csdn.net/qq_45903009/article/details/115646098

版权

一：路由

1·1：什么是路由

根据不同的url来切换对应的组件
实现spa（单页面应用）应用【整个项目只有一个完整页面，页面切换不会刷新页面】

1·2：路由的分类

React-Router：

提供了一些router的核心API，包括Router, Route, Switch等，但是它没有提供 DOM 操作进行跳转的API。
React-Router-DOM：

提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转，大多数情况下我们是这种情况，所以在开发过程中，我们更多是使用React-Router-DOM

1·3：路由模式

第一种：HashRouter（hash模式）

url中会有个#，刷新不会丢失【通过hash值来对路由进行控制】

第二种：BrowserRouter（历史记录模式）

url中没有#，刷新会丢失404（上线中会出现问题本地开发中不会）【通过历史记录api来进行路由的切换的】

1·4：路由导航

第一种：Link

点击路由导航不会出现任何被点击的提示

第二种：NavLink

可以为当前选中的路由设置类名、样式以及回调函数等

如果不喜欢默认的类名active，可以手动使用activeClassName属性给处于活动状态的导航设置样式

注意：【navlink切换的时候不加类名，可能会在vscode的终端中启动项目可能会无效在外部cmd中启动】

坑1：路径中不能有单纯的/ 否则navLink的样式匹配一直都能匹配上
坑2：如果navlink切换的时候不加类名那么如果在vscode的终端中启动项目可能会无效在外部cmd中启动
坑3：navlink添加的类名是active 但是这个单词太常见了可能回合其他的类名冲突，所以在这个时候我们需要改navlink默认的类名：使用activeClassName修改

1·5：路由的跳转有两种方式

第一种：声明式

第二种：编程式

二,路由的基本使用

第一步：下载路由模块

npm install --save react-router-dom
第二步：在index.js中引用路由模块

import { BrowserRouter} from ‘react-router-dom’;

其中BrowserRouter表示路由模式是历史记录模式

你也可以设置路由模式为HashRouter哈希模式

第三步：在index.js使用路由模式包裹跟组件

// 2.引入路由(并指定路由路由模式)
import {BrowserRouter} from "react-router-dom"
//导入路由配置文件
import App from './router/index';
ReactDOM.render(
  //3.使用路由将其包裹
  <BrowserRouter>
    <App />
  </BrowserRouter>,

第四步：新建一个router的文件夹然后再里面创建一个index.js来去容纳路由配置文件

import {Link, Route} from “react-router-dom”

第五步：配置路由规则

<Route path="/home" component={Home}></Route>
<Route path="/car" component={Car}></Route>
<Route path="/news" component={News}></Route>
<Route path="/my" component={My}></Route>

第六步：配置路由导航

使用Link组件即可，to属性就是地址

如果要给选给的路由设置样式，可以使用NavLink
```
<Link to="/home">首页</Link>
<Link to="/car">购物车</Link>
<Link to="/news">消息</Link>
<Link to="/my">我的</Link>
```

三：路由的相关知识点

3·1：精准匹配的使用（exact）

如果不加精准匹配，那么在路由的配置规则里同时有一个path=“/”,和path=“/home”

的，那路由就会同时匹配到这两个，所以一般情况下，都会将path=“/”和精准匹配结合使用

【注意】：如果是多级路由嵌套，就不要再一级路由上添加精准匹配了

【理由】：如果父级路由加上，他下面的子路由将不会生效，因为外层强制匹配了

3·2:404页面

有的时候用户可能会错误修改相关url 但是并没有相关路由解决方式设置404路由组件

【注意问题】：不管到那个页面都会有这个404路由组件

【解决办法】：使用Switch解决

import { Link, NavLink, Route, Switch } from 
import No from "../pages/no"
 <Switch>
   {/* 配置路由规则 */}
   <Route path="/my" component={My}></Route>
    /* 会出现两个页面同时存在*/}
     <Route component={No}></Route>
 </Switch>

3·3：Switch组件

为了解决route的唯一渲染，保证路由只渲染一个路径，当它匹配完一个路径后，就会停止渲染了。

【注意问题】：在网站初始化的时候会出现的是404页面

【解决办法】：路由的重定向

3·4:路由的重定向（redirect）

import { Link, NavLink, Redirect, Route, Switch } from "react-router-dom"

{/* 引申出新的问题，刚进入页面就出现404页面 */}
<Redirect from="/" to="/home" exact></Redirect>

【注意】：重定向页面放到404页面之前

四：二级路由

4·1：二级路由的配置

将二级路由页面引入到一级路由页面中

在一级路由界面设置路由规则与出口

二级路由路径的配置需要在前面添加上一级路由的路径

{/* 路由导航 */}
<NavLink to="/home/list1">二级a</NavLink>
<NavLink to="/home/list2">二级b</NavLink>
<Route path="/home/list1" component={List1}></Route>
<Route path="/home/list2" component={List2}></Route>

4·2：路由的编程式跳转

push方法在路由页面中跳转 this.props.history.push("/xxxx")

【注意问题】：会有报错（报错原因是没有被路由包裹的组件不具有history属性）

【解决办法】：使用withRouter组件

4·3：withRouter组件的使用【HOC】

4·3·1：使用步骤：

第一步：在引进来的路由模块中对withRouter进行解构
```
import { withRouter } from "react-router-dom"
```
第二步：修改导航组件的暴露

第三步：在底部重新进行暴露

import React, { Component } from 'react'
import { withRouter } from "react-router-dom"
class jslink extends Component {
    fun(text) {
        switch (text) {
            case "home": this.props.history.push("/" + text)
            break;
            case "car": this.props.history.push("/" + text)
            break;
            case "news": this.props.history.push("/" + text)
            break;
            case "my": this.props.history.push("/" + text)
            break;
        }
    }
    render() {
        return (
            <div>
                <button onClick={this.fun.bind(this, "home")}>点我去home页面</button>
                <button onClick={this.fun.bind(this, "car")}>点我去car页面</button>
                <button onClick={this.fun.bind(this, "news")}>点我去news页面</button>
                <button onClick={this.fun.bind(this, "my")}>点我去my页面</button>
            </div>
        )
    }
} 
export default withRouter(jslink)

第四步：在需要使用的页面引入

import React, { Component } from 'react'
import Jslink from "../component/jslink"
export default class 
 extends Component {
    render() {
        return (
            <div>
                <Jslink/>
                购物车
            </div>
        )
    }
}

4·3·2：作用

withRoute是给不是路由所管理的组件注入路由的

withRouter的作用是让不具有路由切换的组件也具有路由的切换的三个属性

（location，match，history）

4·3·3：路由跳转

replace()：替换当前路径
goBack()：后退
goForward()：前进

五：高阶组件【HOC】

5.1:什么是高阶组件

在React组件的构建过程中，是react中代码或者ui块的复用的技术（类似于vue的混入）

高阶组件的特点是参数是组件，同时返回值也是一个组件

5·2：封装高阶组件并使用

第一步：创建一个文件夹Hoc，封装一个功能组件index.js，该功能组件会在很多的组件中都会被使用

import React, { Component } from 'react'
let Demohoc=(Com,tj)=>{
    return class index extends Component {
        render() {
                return (
                  <div>
                    //调用进来的组件
                      <Com/>
                    <h4>我是高阶组件中要被复用的值哈哈哈</h4>
                   </div>
               ）
         }
    }
}
export default Demohoc

第二步：使用的时候修改组件的导出方式，并传递参数

import React, { Component } from 'react'
import Demohoc from "../hoc/index"

class hoc extends Component {
    render() {
        return (
            <div>
                <h6>你猜我是哪里的值</h6>
            </div>
        )
    }
}
export default Demohoc(hoc)// 传递参数

第三步：使用

import React, { Component } from 'react'
import Hoc from "../component/hoc"

export default class my extends Component {
    render() {
        return (
            <div>
                我的页面
                <Hoc/>
                <Hoc/>
                <Hoc/>
            </div>
        )
    }
}

5.3:高阶组件HOC-反向继承

反向继承最核心作用，是渲染劫持（拦截了渲染可以让我们进行条件渲染）。

反向继承就是高阶组件的条件渲染

在暴漏组件的时候需要传递参数

import React, { Component } from 'react'
let Demohoc=(Com,tj)=>{
    return class index extends Com {
        render() {
            if(tj>4){
                return (
                  <div>
                    //调用进来的组件
                      <Com/>
                    <h4>我是高阶组件中要被复用的值哈哈哈</h4>
                   </div>
                )
            }else{
                //super.render()是调用父类的render()渲染
                return super.render()
                //return(
                 <Com/>
                )
            }
        }
    }
}
export default Demohoc

import React, { Component } from 'react'
import Demohoc from "../hoc/index"

class hoc extends Component {
    render() {
        return (
            <div>
                <h6>你猜我是哪里的值</h6>
            </div>
        )
    }
}

export default Demohoc(hoc,10)// 传递参数
                <Com/>
                )
            }
        }
    }
}
export default Demohoc

import React, { Component } from 'react'
import Demohoc from "../hoc/index"

class hoc extends Component {
    render() {
        return (
            <div>
                <h6>你猜我是哪里的值</h6>
            </div>
        )
    }
}
export default Demohoc(hoc,10)// 传递参数