React路由

已于 2022-05-06 18:15:31 修改
阅读量887 收藏 4
点赞数 2
分类专栏： 前端 文章标签： react 前端框架
于 2022-04-12 21:43:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54418006/article/details/124100948
版权
1. SPA的理解
  • 单页Web应用（single page web application，SPA）
  • 整个应用只有一个完整的页面
  • 点击页面的链接不会刷新页面，只会做页面的局部更新
  • 数据都需要通过ajax请求获取，并在前端异步展示
2. 路由的理解
1. 什么是路由？
  • 一个路由就是一个映射关系(key: value)
  • key为路径，value可能是function或component
2. 路由分类
  • 后端路由：
    • 理解：value是function，用来处理客户端提交的请求
    • 注册路由：router.get(path, function(req, res))
    • 工作过程：当node接收到一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应数据
  • 前端路由：
    • 浏览器端路由，value是component，用于展示页面内容
    • 注册路由：<Route path="/test" component={Test}>
    • 工作过程：当浏览器的path变为/test时，当前路由组件就会变为Test组件
3. react-router-dom的理解
  • react的一个插件库
  • 专门用来实现一个SPA应用
  • 基于react的项目基本都会用到此库
4. 安装react-router-dom
  • 默认版本是6，所以安装版本5的时候npm i react-router-dom@5
3. 路由的基本使用

  • 明确好界面中的导航区、展示区

  • 导航区的a标签改为Link标签

    <Link to="/xxx">Demo</Link>

  • 展示区写Route标签进行路径的匹配

    <Route path="/xxx" component={Demo}/>

  • <App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

index.jsx

// 引入react核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'
// 引入路由
import { BrowserRouter } from 'react-router-dom'

// 渲染App到页面
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

App.jsx

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header">
              <h2>React Router Demo</h2>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠a链接跳转页面 */}
              {/* <a className="list-group-item" href="./about.html">About</a>
              <a className="list-group-item active" href="./home.html">Home</a> */}

              {/* React中靠路由链接实现切换组件---编写路由链接 */}
              <Link className="list-group-item" to="/about">
                About
              </Link>
              <Link className="list-group-item" to="/home">
                Home
              </Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由*/}
                <Route path="/about" component={About} />
                <Route path="/home" component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

还有About和Home组件就不写出来了。
在这里插入图片描述
用Header组件作为一般组件代替标题，来区分一般组件和路由组件。
Header/index.jsx

import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    console.log('Header组件接收到的props是',this.props);
    return (
      <div className="page-header">
        <h2>React Router Demo</h2>
      </div>
    )
  }
}
  • 写法不同：
    • 一般组件：<Demo/>
    • 路由组件：<Route path="/demo" component={Demo}/>
  • 存放位置不同：
    • 一般组件：components
    • 路由组件：pages
  • 接收到的props不同：
    • 一般组件：写组件标签时传递了什么，就能接收到什么
    • 路由组件：接收到三个固定的属性：
      在这里插入图片描述
4. NavLink的基本使用
{/* 如果只想给NavLink加active属性，就不用添加activeClassName类名 */}
{/* 然后给类名添加样式 */}
<NavLink activeClassName="fg" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="fg" className="list-group-item" to="/home">Home</NavLink>

在这里插入图片描述

5. NavLink与封装NavLink
  • NavLink可以实现由链接的高亮，通过activeClassName指定样式名
  • 标签体内容是一个特殊的标签属性、
  • 通过this.props.children可以获取标签体内容
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>

封装的MyNavLink组件

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class MyNavLink extends Component {
  render() {
    // console.log(this.props)
    return <NavLink activeClassName="fg" className="list-group-item" {...this.props} />
  }
}

在这里插入图片描述

6. Switch的使用
  • 通常情况下，path和component是一一对应的关系
  • Switch可以提高路由匹配的效率(单一匹配)
{/* 注册路由*/}
<Switch>
  <Route path="/about" component={About} />
  <Route path="/home" component={Home} />
  <Route path="/home" component={Test} />
</Switch>

匹配到一次后，就不再匹配，大大提高效率。

7. 解决多级路径刷新页面导致样式丢失的问题
  • public/index.html 中引入样式时不写 ./，直接写 / （常用）
  • public/index.html 中引入样式时不写 ./，直接写 %PUBLIC_URL%（常用）
  • 使用HashRouter（不常用）
8. 路由的严格匹配与模糊匹配
  • 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
  • 开启严格匹配：<Route exact={true} path="/about" component={About}/>
  • 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由
    在这里插入图片描述
9. Redirect的使用
  • 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。
import { Route, Switch, Redirect } from 'react-router-dom'

  <Switch>
    <Route path="/about" component={About} />
    <Route path="/home" component={Home} />
    <Redirect to="/about" />
  </Switch>
10. 嵌套路由
  • 注册子路由要写上父路由的path值
  • 路由的匹配是按照注册路由的顺序进行的
11. 向路由组件传递参数
  • params参数
    • 路由链接(携带参数)：<Link to='/demo/test/tom/18'>详情</Link>
    • 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
    • 接收参数：const {id,title} = this.props.match.params

Home/index.jsx

import React, { Component } from 'react'
import MyNavLink from '../../components/MyNavLink'
import { Route, Switch, Redirect } from 'react-router-dom'
import News from './News'
import Message from './Message'

export default class Home extends Component {
  render() {
    return (
      <div>
        <h3>我是Home页面</h3>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to="/home/news">News</MyNavLink>
            </li>
            <li>
              <MyNavLink to="/home/message">Message</MyNavLink>
            </li>
          </ul>
          {/* 注册路由 */}
          <Switch>
            <Route path="/home/news" component={News} />
            <Route path="/home/message" component={Message} />
            <Redirect to="/home/news" />
          </Switch>
        </div>
      </div>
    )
  }
}

Home/Message/index.jsx

import React, { Component } from 'react'
import Detail from './Detail'
import { Link, Route } from 'react-router-dom'

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' },
    ],
  }
  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 向路由组件传递params参数*/}
                <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
              </li>
            )
          })}
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        <Route path="/home/message/detail/:id/:title" component={Detail} />
      </div>
    )
  }
}

Home/Message/Detail/index.jsx

import React, { Component } from 'react'

const DetailData = [
  { id: '01', content: '你好，中国' },
  { id: '02', content: '你好，未来' },
  { id: '03', content: '你好，好久不见' },
]
export default class Detail extends Component {
  render() {
    console.log(this.props)
    // 接收params参数
    const { id, title } = this.props.match.params
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id
    })
    return (
      <div>
        <ul>
          <li>ID:{id}</li>
          <li>Title:{title}</li>
          <li>Content:{findResult.content}</li>
        </ul>
      </div>
    )
  }
}

在这里插入图片描述

  • search参数
    • 路由链接(携带参数)：<Link to='/demo/test?name=tom&age=18'>详情</Link>
    • 注册路由(无需声明，正常注册路由即可)：<Route path="/demo/test" component={Test}/>
    • 接收参数：this.props.location.search
    • 注意：获取到的search是urlencoded编码字符串，需要借助querystring解析
{/* 向路由组件传递search参数 */}
<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>

{/* search参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail} />

// 引入qs库解析接收的search参数
import qs from 'qs'

 // 接收search参数
 const { search } = this.props.location
 const {id,title} = qs.parse(search.slice(1))

在这里插入图片描述

  • state参数
    • 路由链接(携带参数)：<Link to={{path:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
    • 注册路由(无需声明，正常注册路由即可)：<Route path="/demo/test" component={Test}/>
    • 接收参数：this.props.location.state
    • 注意：刷新也可以保留住参数
{/* 向路由组件传递state参数 */}
<Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>

{/* state参数无需声明接收，正常注册路由即可 */}
<Route path="/home/message/detail" component={Detail} />

   //接收state参数
const { id, title } = this.props.location.state || {}

const findResult =
  DetailData.find((detailObj) => {
    return detailObj.id === id
  }) || {}

在这里插入图片描述

12. push与replace
  • replace会替换当前历史记录
  • 不加replace，默认就是push模式，push会保留历史记录
<MyNavLink replace to="/about">About</MyNavLink>
13. 编程式路由导航

借助this.props.history对象上的API对操作路由跳转、前进、后退

this.props.history.push()
this.props.history.replace()
this.props.history.goBack()
this.props.history.goForward()
this.props.history.go()

App.jsx

import React, { Component } from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠a链接跳转页面 */}
              {/* <a className="list-group-item" href="./about.html">About</a>
              <a className="list-group-item active" href="./home.html">Home</a> */}

              {/* React中靠路由链接实现切换组件---编写路由链接 */}
              {/* 如果只想给NavLink加active属性，就不用添加activeClassName类名 */}
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由*/}
                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
                  <Redirect to="/about" />
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

index.js

// 引入react核心库
import React from 'react'
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入App组件
import App from './App'
// 引入路由
import { BrowserRouter } from 'react-router-dom'

// 渲染App到页面
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

Home/Message/index.jsx

import React, { Component } from 'react'
import Detail from './Detail'
import { Link, Route } from 'react-router-dom'

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' },
    ],
  }

  replaceShow = (id, title) => {
    // replace跳转+携带params参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)

    // replace跳转+携带search参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

    // replace跳转+携带state参数
    this.props.history.replace(`/home/message/detail`, { id, title })
  }

  pushShow = (id, title) => {
    // push跳转+携带params参数
    // this.props.history.push(`/home/message/detail/${id}/${title}`)

    // push跳转+携带search参数
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

    // push跳转+携带state参数
    this.props.history.push(`/home/message/detail`, { id, title })
  }

  back = () => {
    this.props.history.goBack()
  }

  forward = () => {
    this.props.history.goForward()
  }

  go = () => {
    this.props.history.go(2)
  }

  render() {
    const { messageArr } = this.state
    return (
      <div>
        <ul>
          {messageArr.map((msgObj) => {
            return (
              <li key={msgObj.id}>
                {/* 向路由组件传递params参数*/}
                {/* <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                &nbsp;<button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                &nbsp;<button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button> */}
                {/* 向路由组件传递search参数 */}
                {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                &nbsp;<button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                &nbsp;<button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button> */}
                {/* 向路由组件传递state参数 */}
                <Link to={{ pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } }}>{msgObj.title}</Link>
                &nbsp;<button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                &nbsp;<button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button>
              </li>
            )
          })}
        </ul>
        <hr />
        {/* 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}

        {/* search参数无需声明接收，正常注册路由即可 */}
        {/* <Route path="/home/message/detail" component={Detail} /> */}

        {/* state参数无需声明接收，正常注册路由即可 */}
        <Route path="/home/message/detail" component={Detail} />

        <button onClick={this.back}>回退</button>
        <button onClick={this.forward}>前进</button>
        <button onClick={this.go}>go</button>
      </div>
    )
  }
}

Home/Message/Detail/index.jsx

import React, { Component } from 'react'
// 引入qs库解析接收的search参数
// import qs from 'qs'

const DetailData = [
  { id: '01', content: '你好，中国' },
  { id: '02', content: '你好，未来' },
  { id: '03', content: '你好，好久不见' },
]
export default class Detail extends Component {
  render() {
    console.log(this.props)
    // 接收params参数
    // const { id, title } = this.props.match.params

    // 接收search参数
    // const { search } = this.props.location
    // const {id,title} = qs.parse(search.slice(1))

    //接收state参数
    const { id, title } = this.props.location.state || {}

    const findResult =
      DetailData.find((detailObj) => {
        return detailObj.id === id
      }) || {}
    return (
      <div>
        <ul>
          <li>ID:{id}</li>
          <li>Title:{title}</li>
          <li>Content:{findResult.content}</li>
        </ul>
      </div>
    )
  }
}

在这里插入图片描述

14. withRouter
  • withRouter可以加工一般组件，让一般组件具备组件所特有的API
  • withRouter的返回值是一个新组件
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class Header extends Component {
  back = () => {
    this.props.history.goBack()
  }

  forward = () => {
    this.props.history.goForward()
  }

  go = () => {
    this.props.history.go(2)
  }

  render() {
    console.log('Header组件接收到的props是', this.props)
    return (
      <div className="page-header">
        <h2>React Router Demo</h2>
        <button onClick={this.back}>回退</button>
        <button onClick={this.forward}>前进</button>
        <button onClick={this.go}>go</button>
      </div>
    )
  }
}

export default withRouter(Header)

在这里插入图片描述

16. BrowserRouter与HashRouter的区别
  • 底层原理不一样：
    • BrowserRouter使用的H5的history API，不兼容IE9及以下版本
    • HashRouter使用的是URL的哈希值
  • path表现形式不一样：
    • BrowserRouter的路径中没有#，例如：localhost:3000/demo/test
    • HashRouter的路径中包含#，例如：localhost:3000/#/demo/test
  • 刷新后对路由state参数的影响
    • BrowserRouter没有任何影响，因为state保存在history对象中
    • HashRouter刷新后导致路由state参数的丢失
  • 注意：HashRouter可以用于解决一些路径错误相关的问题
FG.
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
react路由配置方式详解
12-09
本文介绍了react路由配置，最近刚开始学，分享给大家，顺便给自己留个笔记。 包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构，主要的代码都在src目录下，src下面新建一个containers文件夹放我们的一些...
react—路由
weixin_46684391的博客
07-07 999
需要注意的是，这种传参方式，目标页面接收到的参数是query字符串，我们需要将这个字符串处理成对象的行，才能通过对象点语法取到数据。而'a1'指的网址是当前网页的网址的最后添加/a1，也就是'http://ip:port/user/a1。在实际中肯定不是通过在地址栏输入不同路由来切换页面的，接下来就通过标签和js语法写代码来实现页面（组件）的切换。注：二级路由不能写成'/a1'，这样写真正的网址是'http://ip:port/a1'；2.1. 利用标签跳<Link to="/路由名"></Link>
react 之路由
qq_56607109的博客
10-18 1082
Link和useNavigate实现组件切换时，实计上伴随着组件的销毁与创建，所以建议只有整体页面切换时才使用路由，而局部切换时使用最原始的隐藏显示为佳，这样可以保让组件中通过ajax得到的数据一直存在。Link和useNavigate实现组件切换时，实计上伴随着组件的销毁与创建，所以建议只有整体页面切换时才使用路由，而局部切换时使用最原始的隐藏显示为佳，这样可以保让组件中通过ajax得到的数据一直存在。第2步在主路由对应的组件中使用配置新的路由, 子路由的访问path为"主路由+子路由"
react 路由的基本原理及实现
最新发布
qq_21087199的博客
02-27 797
该事件会在调用浏览器的前进，后退以及在执行history.forward,history.back 和history.go 的时候触发。
React之动态路由创建以及解决刷新白屏问题
Miketutu的博客
04-30 2717
React之动态路由创建以及解决刷新白屏问题
超详细的React路由基础使用
暗武逢天的博客
05-24 2298
一个路由就是一个映射关系(key:value) key为路径, value可能是function或component
react路由
rtx_xxxx的博客
08-21 475
react基本路由的创建
React路由鉴权的实现方法
10-16
主要介绍了React路由鉴权的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React 路由懒加载的几种实现方案
10-17
主要介绍了React 路由懒加载的几种实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
# react 中使用路由 router 详解
大家好，我是 ed.
10-26 2250
路由就是一个映射关系（ key: value）。key 为路径， value 可能是 function 或者是 component。我们学习路由的时候会遇到两个经常用的单词router和route。区别是什么呢？router 是全局的路由器对象。route 是当前激活的路由对象。打个比方哈，我们自己家里上网需要路由器吧，router 就相当于家里的 路由器。route 就相当于路由器上面的网线插口或者是那个天线，不能没有 router 就是用 route。明确好界面中的导航部分、展示部分都是哪里。
react--路由封装
qq_60976312的博客
08-05 1617
react--路由封装
react-router v6 如何实现动态路由？
kzj0916的博客
08-16 6400
最近在肝一个后台管理项目，用的是react18 + ts 路由用的是v6，当需要实现根据权限动态加载路由表时，遇到了不少问题。v6相比于v5做了一系列改动，通过路由表进行映射就是一个很好的改变（个人认为），但是怎么实现根据权限动态加载路由表呢？我也是网站上找了许多资料发现大部分还是以前版本的动态路由，要是按照现在的路由表来写肯定是不行的。难不成又要写成老版本那样错综复杂？只能自己来手写一个了，如有更好的方法望大佬们不吝赐教。...
React配置路由
weixin_57156748的博客
09-05 130
如果创建好文件可以直接跳过 注:图片下面有代码 新建文件 npm install -g create-react-app create-react-app '项目名称' 创建好文件的直接从这一步开始 npm install react-router-dom react-router-config -S 在scr的index.js中引入下面的 import {HashRouter as Router} from 'react-router-dom' 替换成 然后..
React-router-dom用法（旧）
weixin_63443072的博客
05-17 229
一个路由就是一个映射关系key为路径, value可能是function或component2.理解：value是function,用来处理客户端提交的请求。注册路由： router.get(path, function(req, res))工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据（2）前端路由浏览器端路由，value是component，用于展示页面内容注册路由。
vue将路由信息抽离出来到单独的文件夹里面
seimeii的博客
12-23 798
第一步 抽离路径 第二步 页面中引入 import * as SystemCenter from '@/router/modules/SystemCenter'; 第三步 使用方法
React中的路由模块化，将路由抽离出来
柠檬不萌只是酸i
11-03 1476
新建route.js文件，用来存放路由文件。项目目录如下： 在【route.js】里面里存放项目中的所有组件的： import Home from '../components/Home' import News from '../components/News' import Product from '../components/Product' const routes = [ ...
React路由该如何使用？react-router-dom详解
ZhShy
10-16 1612
通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为/的为绝对路径，反之为相对路径。可以在任何组件中使用Routes组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。注意：此时定义父组件的路由时，要在后面加上/*，否则父组件将无法渲染。}使用，可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于react-router-configuseRoutes的返回是 React Element，或是 null。children?element?
react——路由
m0_55173487的博客
02-03 5473
前端路由就是把不同路由对应不同的内容或页面对应展示出来。路由可以帮助我们很好的管理页面和代码，增强用户的体验感。路由模式有hash和 history 两种模式，通常用hash模式。在react中，react-router是跨平台的，内置通用组件和通用Hooks。
react路由哈希路由
03-31
React路由有两种主要的路由方式：哈希路由和浏览器路由。 哈希路由是指在URL中使用#符号，例如：`http://example.com/#/home`。这种方式的好处是可以避免页面刷新，因为每次URL的改变只会触发hashchange事件，而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

FG.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值