react（尚硅谷）06-Switch的使用，路由模糊匹配，重定向，嵌套路由，向路由组件传递params、search、state参数，push与replace，编程式路由导航，withRouter

最新推荐文章于 2023-02-12 13:56:53 发布
最新推荐文章于 2023-02-12 13:56:53 发布
阅读量702 收藏
点赞数
分类专栏： React 文章标签： react.js 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/121126423
版权
1、Switch的使用
<div className="panel-body">

                  {/*注册路由*/}
                  <Switch>
                    <Route path="/about" component={About}/>
                    <Route path="/home" component={Home}/>
                    <Route path="/home" component={Test}/>
                  </Switch>
                  
  </div>
2、路由的模糊匹配

只要NavLink的to路径值包含了路由路径，就能给路由路径访问相应的组件

 <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                {/*编写路由连接*/}
                <NavLink className="list-group-item" to="/about">About</NavLink>
                <NavLink className="list-group-item" to="/home">Home</NavLink>
                <MyNavLink to="/about">About</MyNavLink>
                <MyNavLink to="/home/a/b">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}/>
                    <Route path="/home" component={Test}/>
                  </Switch>

              </div>

以上代码依然能正常访问，这就是模糊匹配

如果要开启严格匹配模式则需要添加exact属性

<div className="panel-body">
     {/*注册路由*/}
    <Switch>
        <Route exact path="/about" component={About}/>
        <Route exact path="/home" component={Home}/>
   </Switch>
 </div>

在这里插入图片描述

3、redirect的使用

需要导入Redirect模块

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

Redirect相当于兜底，所有路由都不匹配的时候，就匹配Redirect指定的路由

<div className="panel-body">
    {/*注册路由*/}
   <Switch>
        <Route exact path="/about" component={About}/>
        <Route exact path="/home" component={Home}/>
        <Redirect to="/home"/>
   </Switch>
</div>
4、嵌套路由

app.js

import React, { Component } from 'react'
import {NavLink,Route,Switch,Redirect} from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import Header from './pages/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">
            <div className="page-header">
              <Header/>
            </div>
          </div>
        </div>
        <div className="row">
            <div className="col-xs-2 col-xs-offset-2">
              <div className="list-group">
                {/*编写路由连接*/}
                <NavLink className="list-group-item" to="/about">About</NavLink>
                <NavLink className="list-group-item" to="/home">Home</NavLink>
                <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>
    )
  }
}

Home/index.js

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

class Home extends Component {
  render () {
    return (
      <div>
        <h2>Home组件内容</h2>
        <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>
              <News path="/home/news" component={News}/>
              <Message path="/home/message" component={Message}/>
            </Route>
          </Switch>


        </div>
      </div>
    )
  }
}

export default Home
5、向路由组件传递参数–params参数

Message/index.js

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>

    )
  }

Message/Detail/index.js

import React, { Component } from 'react'

const DeatilData=[
  {id:'01',content:'听他说又再抢购尚敏'},
  {id:'02',content:'尚敏时候又要打报告了'},
  {id:'03',content:'天天就这点事，烦死了'}

]
class Detail extends Component {
  render () {
    const {id,title}= this.props.match.params
    const findResult=DeatilData.find((detailObj)=>{
      return detailObj.id===id
    })

    console.log(this.props)
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }
}

export default Detail
6、向路由组件传递参数–Search参数

需要引入一个‘querystring’库
Message/index.js

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

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}>
                  {/*向路由组件传递search参数*/}
                  <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/*声明接受search参数,search参数无需声明接收，正常注册路由即可*/}
        <Route path="/home/message/detail" component={Detail}/>

      </div>

    )
  }
}

export default Message

Message/Detail/index.js

import React, { Component } from 'react'
import qs from 'querystring'
const DeatilData=[
  {id:'01',content:'听他说又再抢购尚敏'},
  {id:'02',content:'尚敏时候又要打报告了'},
  {id:'03',content:'天天就这点事，烦死了'}

]
class Detail extends Component {
  render () {
    console.log(this.props)
    //接受search参数
    const {search}=this.props.location
    const {id,title}=qs.parse(search.slice(1))

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

    console.log(this.props)
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }
}

export default Detail

在这里插入图片描述

7、向路由组件传递参数–state参数

state参数不在地址栏出现
Message/index.js

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

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}>
                  {/*向路由组件传递state参数*/}
                  <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/*声明接受state参数,state参数无需声明接收，正常注册路由即可*/}
        <Route path="/home/message/detail" component={Detail}/>

      </div>

    )
  }
}

export default Message

Message/Detail/index.js

import React, { Component } from 'react'

const DeatilData=[
  {id:'01',content:'听他说又再抢购尚敏'},
  {id:'02',content:'尚敏时候又要打报告了'},
  {id:'03',content:'天天就这点事，烦死了'}

]
class Detail extends Component {
  render () {
    //接受state参数
    const {id,title}=this.props.location.state || {}

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

    console.log(this.props)
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }
}

export default Detail

在这里插入图片描述

8、push与replace

默认开启push模式
开启repalce需要在Link标签内设置replace属性：

<ul>
          {
            messageArr.map((msgObj)=>{
              return(
                <li key={msgObj.id}>
                  {/*向路由组件传递state参数*/}
                  <Link replace={true} to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
9、编程式路由导航

以下例子总报replace错误
使用history对象上的各种方法
1、携带params参数

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

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

  replaceShow=(id,title)=>{
    //实现跳转到detail组件，且为replace跳转+携带params参数
    this.props.history.replace(`/home/message/detail/${id}/${title}`)
  }
  pushShow=(id,title)=>{
    //实现跳转到detail组件，且为replace跳转
    //this.props.history.push(`/home/message/detail/${id}/${title}`)
    this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)
  }
  render () {
    const {messageArr}=this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return(
                <li key={msgObj.id}>
                  {/*向路由组件传递state参数*/}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                  <button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
                  <button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/*声明接受state参数,state参数无需声明接收，正常注册路由即可*/}
        <Route path="/home/message/detail/:id/:title" component={Detail}/>

      </div>

    )
  }
}

export default Message

2、携带search参数

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

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

  replaceShow=(id,title)=>{
    //实现跳转到detail组件，且为replace跳转+携带params参数
    //this.props.history.replace(`/home/message/detail/${id}/${title}`)
    //且为replace跳转+携带search参数
    this.props.history.replace(`/home/message/detail/?id=${id}&title=${title}`)
  }
  pushShow=(id,title)=>{
    //实现跳转到detail组件，且为replace跳转
    //this.props.history.push(`/home/message/detail/${id}/${title}`)
    this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)
  }
  render () {
    const {messageArr}=this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return(
                <li key={msgObj.id}>
                  {/*向路由组件传递state参数*/}
                  {/*<Link replace={true} to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>*/}
                  {/*<Link to={`/home/message/detail/${msgObj.id}/title=${msgObj.title}`}>{msgObj.title}</Link>*/}

                  <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
                  <button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
                  <button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/*声明接受state参数,state参数无需声明接收，正常注册路由即可*/}
        <Route path="/home/message/detail" component={Detail}/>

      </div>

    )
  }
}

export default Message

detail.js

import React, { Component } from 'react'
import qs from 'querystring'
const DeatilData=[
  {id:'01',content:'听他说又再抢购尚敏'},
  {id:'02',content:'尚敏时候又要打报告了'},
  {id:'03',content:'天天就这点事，烦死了'}

]
class Detail extends Component {
  render () {
    //接受state参数
    //const {id,title}=this.props.location.state || {}
    //接受search参数
    const {search}=this.props.location
    const {id,titile}=qs.parse(search.slice(1))
    
    const findResult=DeatilData.find((detailObj)=>{
      return detailObj.id===id
    }) 

    console.log(this.props)
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }
}

export default Detail

3、携带state参数

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

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

  replaceShow=(id,title)=>{
    //实现跳转到detail组件，且为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:id,title:title})
  }
  pushShow=(id,title)=>{
    //实现跳转到detail组件，且为replace跳转
    //this.props.history.push(`/home/message/detail/${id}/${title}`)
    //this.props.history.push(`/home/message/detail/?id=${id}&title=${title}`)
    this.props.history.push(`/home/message/detail/`,{id:id,title:title})
  }
  render () {
    const {messageArr}=this.state
    return (
      <div>
        <ul>
          {
            messageArr.map((msgObj)=>{
              return(
                <li key={msgObj.id}>
                  {/*向路由组件传递state参数*/}
                  <Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
                  {/*<Link to={`/home/message/detail/${msgObj.id}/title=${msgObj.title}`}>{msgObj.title}</Link>*/}
                  {/*<Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>*/}
                  <button onClick={()=>this.pushShow(msgObj.id,msgObj.title)}>push查看</button>
                  <button onClick={()=>this.replaceShow(msgObj.id,msgObj.title)}>replace查看</button>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        {/*声明接受state参数,state参数无需声明接收，正常注册路由即可*/}
        <Route path="/home/message/detail" component={Detail}/>

      </div>

    )
  }
}

export default Message

detail.js

import React, { Component } from 'react'
import qs from 'querystring'
const DeatilData=[
  {id:'01',content:'听他说又再抢购尚敏'},
  {id:'02',content:'尚敏时候又要打报告了'},
  {id:'03',content:'天天就这点事，烦死了'}

]
class Detail extends Component {
  render () {
    //接受state参数
    const {id,title}=this.props.location.state || {}
    //接受search参数
    // const {search}=this.props.location
    // const {id,title}=qs.parse(search.slice(1))

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

    console.log(this.props)
    return (
      <ul>
        <li>ID:{id}</li>
        <li>Title:{title}</li>
        <li>content:{findResult.content}</li>
      </ul>
    )
  }
}

export default Detail
10、withRouter

一般组件使用路由组件的api使用withRouter包裹类名

const {withRouter} form ‘react-router-dom’
export default withRouter（Header）

在这里插入图片描述

10、BrowerRouter和HashRouter

在这里插入图片描述

心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Day08:Switch 语句
qq_34491373的博客
02-11 798
摘自杨杰老师：Switch 语句
vue 第五天 路由的基本使用；路由重定向(redirect)；嵌套路由的做法(children)；动态匹配路由(id,props,$route.params.id)；命名路由；编程导航用法
m0_55170432的博客
05-09 1609
--------------------- 基本概念与原理 ------------------------ 1.1 路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 前端路由 概念：根据不同的用户事件，显示不同的页面内容 本质：用户事件与事件处理函数之间的对应关系 实现简易前端路由 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据ha
JavaScript中switch的匹配问题
小小少年eason的博客
10-23 893
=== 为恒等计算符，同时检查表达式的值与类型,而switch 语句会使用恒等计算符(===)进行比较 如以下的代码, 10 和 "10"的类型不同, 所以无法匹配 var x = 10; switch(x) { case "10": alert("Hello"); } ...
React（七）- React路由以及嵌套路由的使用
Zong_0915的博客
04-15 1803
React（七）- React路由前言一. 路由1.1 路由的使用 React系列文章导航 前言 在讲React路由前，先来看下SPA的相关概念： SPA：single page web application 单页Web应用。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面，只会做页面的局部更新。 数据都需要通过Ajax请求获取，并在前端异步展示。 一. 路由 路由的概念： 一个路由就是一个映射关系（key:value）。 key是路径，value可能是一个组件或者一个函数。 路由
java用Switch和case忽略大小写进行匹配
weixin_42584507的博客
02-12 1129
Java 中的 switch 和 case 是区分大小写的，如果需要忽略大小写进行匹配，可以将所有的 case 字符串转换为小写或大写形式，再进行比较。 例如： String input ="UPPERCASE"; switch (input.toLowerCase()) { case "uppercase": System.out.println("Match Found!"); ...
React路由 - 路由参数、withRouter组件、Router hooks、路由组件传参、Switch组件、Redirect重定向组件、动态路由
此鱼非闲鱼也的博客
07-15 4671
说动态路由之前，先看看路由参数都有哪些？ 1、路由参数 1-1、history 历史记录及路由给我们的一些操作 路由是根据历史记录跳转视图 history对象中提供了很多方法，便于用户再浏览历史记录中跳转。 go() 方法可以回到历史记录中的某一页面， 通过与当前页面相对位置来标志 。 当前页面的相对位置标志为0。go()方法中，传入一个参数，这个参数是一个整数， 即在 history 记录中向前或者后退多少步。 history.goBack()方法可以回到历史记录中的上一个 URL。 调用该方法的效果等价
react-router-dom 嵌套路由的实现
10-15
总结起来，`react-router-dom`的嵌套路由实现主要是通过`BrowserRouter`、`Switch`和`Route`组件来完成的。通过将路由配置与组件结合，我们可以灵活地控制应用中不同URL对应的页面内容，同时提供导航和错误处理功能...
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
安装npm install react-router-cache-route --save# oryarn add react-router-cache-route用法用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由）...
react-router4 嵌套路由的使用方法
08-29
在`react-router v4`中，嵌套路由（Nested Routing）允许我们构建层次化的路由结构，这有助于在大型应用中更好地组织和管理组件。以下是对`react-router4`嵌套路由的详细解释和使用方法。 首先，我们需要引入必要的...
详解react如何在组件中获取路由参数
08-30
React Router库提供了在组件中获取路由参数的功能，使得我们可以根据不同的参数来渲染不同的组件内容。下面将详细介绍如何在React组件中获取路由参数。 首先，我们需要安装React Router库。React Router分为v4、v5...
【暖*墟】#switch-case用法#
flora715的博客
07-13 578
switch-case用法1.switch-case 一般用来做值匹配。//匹配 就是全等。 语法： switch(表达式){ case 值1: //表达式的值和 值1 匹配上了，需要执行的代码; break; case 值2: //表达式的值和 值2 匹配上了，需要执行的代码; break; case ...
React - 路由 Switch 的使用（路由单一匹配）
技术共享，共同进步！
08-01 1510
React - 路由 Switch 的使用（路由单一匹配）
C# 中的switch case 模式匹配 写法 备忘
weixin_43542114的博客
06-16 860
private static void TestSwitch() { string path = "a.txt"; lab1: Console.WriteLine("Input Key R Read Or W Write:"); ConsoleKeyInfo inputKey = Console.ReadKey(); Console.WriteLine(); .
0804-尚硅谷-react-路由
qq_43125921的博客
08-08 106
解决样式丢失 - p82 路径层级的问题，如果错误，返回的是public下的index.js 可能导致本地样式文件丢失 解决办法： 用绝对路径写，引入文件用上面这个前缀，相当于，在public下的绝对路径 使用hash路由，#后面的都是前端资源，发请求的时候忽略后面的路径 ？？？ yarn 和 npm 不要混着用，可能造成包丢失，yarn挺好的 路由模糊匹配和严格匹配 exact={true} 开启精准匹配 只写exact 效果一样，写在路由里 Redirect的使用 重定向...
Switch 块、Switch 表达式、Switch 模式匹配，越来越好用的 Switch
沉潜飞动
07-30 1566
与 if-else 一样，switch 语法是用来做条件判断的。当条件清晰简洁时，能够有效地提升代码可读性。switch 语法从 Java5 开始，Java12 增加了 Switch 表达式（Java14 提供正式版），Java17 增加 Switch 模式匹配（预览版）。...
解决switch……case不能匹配字符串的方法
热门推荐
litoyao的专栏
05-14 1万+
以前写代码的时候，没有考虑到效率的问题。if……else if……else if 写了老长。如果数据量特别大的话，其实会影响到程序的效率。因为，if语句是从上到下一个个判断的，直到条件为真才退出。而switch……case 则不是从上到下进行验证的，因此效率要比if else高。 可惜的是，switch case 不支持字符串，着实让我伤脑筋。今天在网上查了些资料，得到一些提示，拿出来晒晒
switch匹配问题
05-31 3331
C和C++中的switch匹配case的问题，记住下面2条原则就行了：只有当所有case都不匹配时才会进入default语句 当找到一个匹配（无论是case还是default）后，会进入下面的case语句，直到找到break才会跳出switch。 我们把一个正常的switch的default语句转移到代码的最开始处然后执行代码可以发现问题： #include <stdlib.h> #inc
react-router-domv6配置路由重定向
最新发布
04-26
好的，为您解答。在 React-Router-Dom v6 中，路由重定向可以通过使用 Navigate 组件来实现。例如，要将 /foo 重定向到 /bar，您可以使用以下代码： ```jsx import { Routes, Route, Navigate } from 'react-router-dom'; function App() { return ( <Routes> <Route path="/foo" element={<Navigate to="/bar" />} /> <Route path="/bar" element={<Bar />} /> </Routes> ); } ``` 您可以像其他组件一样，在 `<Navigate>` 组件中使用 `to` 属性来设置要重定向的路径。 希望这能回答您的问题。如果您有其他问题，可以随时问我。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值