实践 react 路由详解

已于 2022-04-16 16:27:13 修改
阅读量943 收藏
点赞数
文章标签： 前端
于 2022-04-09 13:59:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67227657/article/details/124058551
版权

一、安装react-router-dom并启动项目

二、使用路由

1、导入路由相关组件

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<div>
        <h1>路由</h1>
</div>)
}
export default App;

2、创建首页与About页面

//创建首页
function Home(){
    return (<div>
        <h1>首页内容</h1>
</div>);
}

//创建关于页面
function About(){
    return (<div>
        <h1>关于页面内容</h1>
</div>);
}

3、配置路由：导航，页面容器

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
       </div>

</Router>);
}
export default App;

运行结果：

4、创建详情页面（带参数路由）

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
       </div>
</Router>);
}
export default App;


//创建详情页
function Details(){
    return (<div>
        <h1>详情页面<h1>
</div>);
}

 运行结果：

5、获取参数 


//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
       </div>
</Router>);
}
export default App;


//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
    return (<div>
        <h1>详情页面<h1>
        <p>参数：{props.match.params.id}</p>
        <p>match:{JSON.stringify(props.mach)}</p>
</div>);
}

 运行结果：

 三、创建子路由

1、创建Admin页面、OrderList、Dash页面

function Admin(){
 return <div>
    <h1>Admin页面</h1>
    </div>
}

function Dash(){
 return <div>
    <h2>概览页面</h2>
    </div>
}

function OrderList(){
 return <div>
    <h2>订单列表页面</h2>
    </div>
}

2、配置Admin页面以及子路由


//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
        <NavLink to="/admin">管理页面</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
         <Route path='/admin' component={Admin}></Route>
       </div>
</Router>);
}
export default App;

function Admin(){
 return <div>
    <h1>Admin页面</h1>
    <p>
    <NavLink to="/admin/dash">概览</NavLink> |
    <NavLink to="/admin/orderlist">订单列表</NavLink>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    </p>
    </div>
}

function Dash(){
 return <div>
    <h2>概览页面</h2>
    </div>
}

function OrderList(){
 return <div>
    <h2>订单列表页面</h2>
    </div>
}

//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
    return (<div>
        <h1>详情页面<h1>
        <p>参数：{props.match.params.id}</p>
        <p>match:{JSON.stringify(props.mach)}</p>
</div>);
}

3、重定向默认页面


//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect} from 'react-router-dom'
function App(){
    return (
<Router>
       {/*导航部分*/}
      <div className='nav'>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink> |
        <NavLink to="/details/abc">abc详情</NavLink> |
        <NavLink to="/details/123">123详情</NavLink> |
        <NavLink to="/admin">管理页面</NavLink> |
      </div>
       <div className='views'>
         <Route path='/' component={Home} exact></Route>
         <Route path='/about' component={About}></Route>
         <Route path='/details/:id' component={Details}></Route>
         <Route path='/admin' component={Admin}></Route>
       </div>
</Router>);
}
export default App;

function Admin(){
 return <div>
    <h1>Admin页面</h1>
    <p>
    <NavLink to="/admin/dash">概览</NavLink> |
    <NavLink to="/admin/orderlist">订单列表</NavLink>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    {/*重定向dash页面*/}
    <Redirect from='/admin' to="/admin/dash"></Redirect>
    </p>
    </div>
}

function Dash(){
 return <div>
    <h2>概览页面</h2>
    </div>
}

function OrderList(){
 return <div>
    <h2>订单列表页面</h2>
    </div>
}

//创建详情页
//match 匹配的路由参数 isExact是否精确匹配 params路由的参数
function Details(props){
    return (<div>
        <h1>详情页面<h1>
        <p>参数：{props.match.params.id}</p>
        <p>match:{JSON.stringify(props.mach)}</p>
</div>);
}

运行结果：

四、路由跳转history

//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数

function Home({history}){
    return (<div>
        <h1>首页内容</h1>
        <button onClick={history.goBack}>返回</button>
    </div>);
}
//不同NavLink跳转到首页
function About({match,history,location}){
    return (<div>
        <h1>关于首页内容</h1>
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>首页-输出历史记录</button>        
    </div>);
}

 运行结果：

五、location地址栏信息

/创建一个详情页面
function Details({match,location}){
  return(<div>
<h1>详情内容</h1>
{/* <p>参数：{props.match.params.id}</p> */}
<p>参数：{match.params.id}</p>
<p>match:{JSON.stringify(match)}</p>
<p>location:{JSON.stringify(location)}</p>
  </div>);
}
//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数


//不同NavLink跳转到首页
function About({match,history,location}){
    return (<div>
        <h1>关于首页内容</h1>
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>首页-输出历史记录</button>
        <NavLink to={{
            pathname:"/details/abc",
            search:"name=mumu&age=18",
            hash:"good",
            state:{redirect:"/about"}
        }}>详情ABC</NavLink>
    </div>);
}

 运行结果：

六、404配置

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
//Switch一次匹配一个页面
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
            <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            {/* <Route path="/admin" component={Admin}></Route> */}
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
             {/* *代表匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>
           
            </Switch>
        </div>
    </Router>);
}
export default App;

//404页面
function NoMatch({location}){
    return(<div>
        <h3>404</h3>
        <p>当前地址找不到：{location.pathname}</p>
        <NavLink to ="/">首页</NavLink>
    </div>)
}

 运行结果：

八、权限管理

1、创建一个登录页面、添加Priviate权限页面

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
            <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            {/* <Route path="/admin" component={Admin}></Route> */}
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
             {/* *代表匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>
           
            </Switch>
        </div>
    </Router>);
}
export default App;
//把props.chilren 解构为children ...rest 剩余的其他参数
function Private({children,...rest}){
    // 把Private组件的参数除了children全部转移到Route组件
    // Route不直接指定component通过render渲染出来
    return <Route {...rest} render={
        ({location})=>{
            // 如果获取本地存储的isLog得到了（登录了），返回children子节点Admin
            // 否则 返回一个Redirect组件
            // Redirect 默认跳转到 /login登录页面 传入一个state数据
            // redirect自定义值 location.pathname(本地要跳转的地址)
            return localStorage.getItem("isLog")?(children):<Redirect to={{pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
    }
} ></Route>
}

//登录
function Login({location,history}){
    function logIt(){
        //存储本地
        localStorage.setItem("isLog",true);
        //获取redirect信息
        // var redirect=location.state.redirect ||"/";
        var redirect =location.state && location.state.redirect ? location.state.redirect : '/';
        //如果没有拿到就跳转到首页
        history.push(redirect);
    }
    return <div>
        <h1>登录</h1>
        <button onClick={logIt}>登录</button>
    </div>
}

运行结果：

完整代码如下：

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//Navlink 导航链接
//Switch一次匹配一个页面
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
            <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            {/* <Route path="/admin" component={Admin}></Route> */}
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
             {/* *代表匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>
           
            </Switch>
        </div>
    </Router>);
}
export default App;
//把props.chilren 解构为children ...rest 剩余的其他参数
function Private({children,...rest}){
    // 把Private组件的参数除了children全部转移到Route组件
    // Route不直接指定component通过render渲染出来
    return <Route {...rest} render={
        ({location})=>{
            // 如果获取本地存储的isLog得到了（登录了），返回children子节点Admin
            // 否则 返回一个Redirect组件
            // Redirect 默认跳转到 /login登录页面 传入一个state数据
            // redirect自定义值 location.pathname(本地要跳转的地址)
            return localStorage.getItem("isLog")?(children):<Redirect to={{pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
    }
} ></Route>
}

//登录
function Login({location,history}){
    function logIt(){
        //存储本地
        localStorage.setItem("isLog",true);
        //获取redirect信息
        // var redirect=location.state.redirect ||"/";
        var redirect =location.state && location.state.redirect ? location.state.redirect : '/';
        //如果没有拿到就跳转到首页
        history.push(redirect);
    }
    return <div>
        <h1>登录</h1>
        <button onClick={logIt}>登录</button>
    </div>
}

//404页面
function NoMatch({location}){
    return(<div>
        <h3>404</h3>
        <p>当前地址找不到：{location.pathname}</p>
        <NavLink to ="/">首页</NavLink>
    </div>)
}

function Admin(){
    return <div>
        <h1>Admin页面</h1>
        <p>
            <NavLink to="/admin/dash">概览</NavLink>|
            <NavLink to="/admin/orderlist">订单列表</NavLink>
        </p>
        <Route path="/admin/dash" component={Dash}></Route>
        <Route path="/admin/orderlist" component={OrderList}></Route>
        <Redirect from = '/admin' to="/admin/dash"></Redirect>        
        </div>
}
function Dash(){
    return <div>
        <h2>概览页面</h2>
        </div>
}
function OrderList(){
    return <div>
        <h1>订单列表页面</h1>
        </div>
}

//创建一个详情页面
function Details({match,location}){
  return(<div>
<h1>详情内容</h1>
{/* <p>参数：{props.match.params.id}</p> */}
<p>参数：{match.params.id}</p>
<p>match:{JSON.stringify(match)}</p>
<p>location:{JSON.stringify(location)}</p>
  </div>);
}
//match 匹配的路由参数 path 路径 url 地址
//isExact 是否精确匹配 params 路由的参数

function Home({history}){
    return (<div>
        <h1>首页内容</h1>
        <button onClick={history.goBack}>返回</button>
    </div>);
}
//不同NavLink跳转到首页
function About({match,history,location}){
    return (<div>
        <h1>关于首页内容</h1>
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>首页-输出历史记录</button>
        <NavLink to={{
            pathname:"/details/abc",
            search:"name=mumu&age=18",
            hash:"good",
            state:{redirect:"/about"}
        }}>详情ABC</NavLink>
    </div>);
}

言兮的酒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React路由跳转及路由传参的几种方式
A20201130的博客
07-12 4927
原理：hash路由的原理是监听hashchange事件 安装包 npm i react-router-dom@5.3.0 代码部分 Link 和 NavLink区别：NavLink指向的路径会自带一css类名swith：用Switch组件包裹多个组件。在组件下，不管有多少个Route的路由规则匹配成功，都只会渲染第一个匹配的组件404： 不设置path属性，将404页对应的路由放在switch内部的最后位置 三、编程式路由跳转 传递参数组件里方法： let goNews = ()=>{
【React】路由（详解）
m0_48982503的博客
03-18 5904
单页应用程序 SPA: 路由: 前端路由： 后端路由： 路由的基本使用 使用步骤 常用组件说明 BrowserRouter和HashRouter的区别 路由的执行过程 默认路由 精确匹配 Switch的使用 重定向路由 嵌套路由 向路由组件传递参数 1.params参数 2.search参数 3.state参数 编程式路由导航 withRouter
React 路由详解(超详细详解)
热门推荐
chen4565的博客
07-30 1万+
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
react18【系列实用教程】react-router-dom —— 路由管理 （2024最新版）
最新发布
朝阳39的博客
05-14 676
类似 vue-router。
React 之Router路由（含5.0与6.0版本）
qq_45799465的博客
04-19 8726
一、路由介绍 二、事前准备 2.1 安装路由模块 2.2 相关组件 三、V5版本路由使用 3.1 声明式导航 3.2 编程式导航 3.3 嵌套路由 3.4 路由传参 3.5 重定向 与 404 3.6 三种路由的渲染方式【了解】 3.7 withRouter高阶组件 3.8 自定义导航组件 四、V6版本路由使用 4.1 声明式导航 4.2 编程式导航 4.3 重定向与404 4.4 传参 4.5 嵌套路由 4.6 批量配置路由
React路由最全详解
qq_61876792的博客
04-09 8894
react并没有提供像Vue专门创建路由的页面，react路由需要先安装，然后导入才能使用，下面是react路由从安装到实现的详细步骤，一起来看看吧！ 开始前的准备：本案例需要先改造一下react项目的index.js文件 ，关闭严格模式，路由才可正常跳转，否则会出现导航栏显示已跳转但是页面未跳转的情况！！ 1：首先安装 npm i react-router-dom@5.0 react路由可以指定安装版本，我安装的是5.0版本的 2：在APP.js页面中导入 上图中..
React 之 Router - 路由详解
玄鱼殇
08-18 5501
1. 安装react-router。3. 跳转Link && 占位组件。四、Not Found页面配置。hook只能在函数式组件中使用。配置放到一个地方进行集中管理。1. 创建router文件夹。2. 在App.jsx中使用。1. index.js中配置。一、Router的基本使用。一、Router的基本使用。2. search传递参数。三、Navigate导航。路由高阶组件再进一步封装。2. router中配置。路由高阶组件进一步封装。1. 动态路由的方式。
react路由配置方式详解
08-29
React 路由配置方式详解 React 路由配置是 React 应用程序中一个非常重要的部分，它可以帮助我们实现客户端路由，并提供了许多有用的功能，例如参数传递、重定向等。本篇文章将详细介绍 React 路由配置的方式，并...
详解前端路由实现与react-router使用姿势
08-29
详解前端路由实现与react-router使用姿势 前端路由是指在客户端实现的路由机制，用于控制页面之间的跳转和数据交换。在SPA（Single Page Application）开发中，前端路由扮演着至关重要的角色。React Router是目前最...
详解各版本React路由的跳转的方法
11-27
React-Router已经发布了多个版本，利用路由导航的使用方法都不大一样，在这里总结一下。 React-Router 2.0.0 版本 2.0.0版本需要使用browserHistory进行跳转，具体参考一下代码： import { browserHistory } from '...
react router 4.0以上的路由应用详解
08-29
React Router 是一个流行的React库，用于管理应用内的路由。在React Router 4.0及以上版本中，路由系统经历了一些重大改变，使得API更加简洁和灵活。这篇文章将详细讲解这些变化，以及如何正确地在你的应用中使用...
详解如何给React-Router添加路由页面切换时的过渡动画
12-03
那在React中应该如何给路由切换添加过渡动画呢？ react-transition-group 我们需要借助React的官方动画库react-transition-group，文档戳这里 react-transition-group提供了三个React组件，分别是，<CSS
详解react如何在组件中获取路由参数
12-29
路由参数 假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？ 这种场景就需要用到路由的参数功能，增加一条包含参数的路由配置。 import List from '...
React Native中导航组件react-navigation跨tab路由处理详解
11-28
大家应该都有所体会，我们在一般应用都有跨tab跳转的需求， 这就需要特别处理下路由，所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab....
Flutter 局部路由实现详解
08-25
* Navigator 执行寻找路由的顺序是 initialRoute -> onGenerateRoute -> onUnknownRoute，这个和 React 的 Route 是类似的。 四、示例代码 下面是一个简单的示例代码，演示如何使用 Navigator 实现局部路由： ```...
详解react-router4 异步加载路由两种方法
08-29
react-router4 异步加载路由两种方法 React Router 4 是一个功能强大且灵活的路由管理库，它提供了多种路由管理方式，包括异步加载路由。异步加载路由是一种可以按需加载路由的方式，使得应用程序的启动速度变得更...
超详细的React路由基础使用
暗武逢天的博客
05-24 2752
一个路由就是一个映射关系(key:value) key为路径, value可能是function或component
Warning: Can‘t perform a React state update on an unmounted component.
qubes的专栏
10-11 381
网络请求回来之后使用setState，如果组件被销毁的话就会报这个错误。pro-antd 开发模式下，login 页面登陆之后报错。异常信息：组件销毁了，但是react还在set state。
React 路由基础--React路由介绍
m0_54088431的博客
11-08 3980
两种常用的路由模式：BrowserRouter和HashRouter声明当前要用是一个非hash的模式的路由包裹整个应用一个React应用只需要使用一次HashRouter，hash模式的路由一个有#（HashRouter），一个一带#（BrowserRouter）（推荐）Link指定导航链接，完成路由跳转to属性指定路由地址，最终被渲染为a标签Routes提供一个路由出口，满足条件的路由组件，会渲染到组件内部Route用于指定路由组件和路由地址path：路由组件对应的路径；
react路由哈希路由
03-31
React路由有两种主要的路由方式：哈希路由和浏览器路由。 哈希路由是指在URL中使用#符号，例如：`http://example.com/#/home`。这种方式的好处是可以避免页面刷新，因为每次URL的改变只会触发hashchange事件，而...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值