zoukankan      html  css  js  c++  java
  • reactrouterdom路由传参的方式

    路由传值的三种方式(v5.x)
    1.params参数
    //路由链接(携带参数):

    <Link to='/demo/test/tom/18'}>详情</Link> 
    //或 <Link to={{ pathname:'/demo/test/tom/18' }}>详情</Link>
    

    //注册路由(声明接收):

    <Route path="/demo/test/:name/:age" component={Test}/>
    

    //接收参数:
    this.props.match.params

    2.search参数
    //路由链接(携带参数):

    <Link to='/demo/test?name=tom&age=18'}>详情</Link>
    

    //注册路由(无需声明,正常注册即可):

    <Route path="/demo/test" component={Test}/>
    

    //接收参数:
    this.props.location.search

    //备注:获取到的search是urlencoded编码字符串(例如: ?id=10&name=zhangsan),需要借助query-string解析参数成对象

    3.state参数
    //路由链接(携带参数):

    <Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
    

    //注册路由(无需声明,正常注册即可):

     <Route path="/demo/test" component={Test}/>
    

    //接收参数:
    this.props.location.state

    //备注:刷新也可以保留住参数

    路由传值的三种方式(v6.x)

    1.params参数
    //路由链接(携带参数):

    <Link to={{ pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
    

    //或 <Link to={/b/child1/${id}/${title}}>Child1

    //注册路由(声明接收):

    <Route path="/b/child1/:id/:title" component={Test}/>
    

    //接收参数:

    import { useParams } from "react-router-dom";
    const params = useParams();
    //params参数 => {id: "01", title: "消息1"}
    

    2.search参数
    //路由链接(携带参数):

     <Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>
    

    //注册路由(无需声明,正常注册即可):

    <Route path="/b/child2" component={Test}/>
    
    //接收参数方法1:
    import { useLocation } from "react-router-dom";
    import qs from "query-string";
    const { search } = useLocation();
    //search参数 => {age: "20", name: "zhangsan"}
    
    //接收参数方法2:
    import { useSearchParams } from "react-router-dom";
    const [searchParams, setSearchParams] = useSearchParams();
    // console.log( searchParams.get("id")); // 12
    
    //备注:获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan),需要借助query-string解析参数成对象
    

    3.state参数
    //通过Link的state属性传递参数

     <Link
     className="nav"
     to={`/b/child2`}
     state={{ id: 999, name: "i love merlin" }}> Child2</Link>
    

    //注册路由(无需声明,正常注册即可):

    <Route path="/b/child2" component={Test}/>
    

    //接收参数:

    import { useLocation } from "react-router-dom";
    const { state } = useLocation();
    //state参数 => {id: 999, name: "我是梅琳"}
    
    //备注:刷新也可以保留住参数
    
  • 相关阅读:
    log4net 发布到生产环境不写日志的解决方法--使用 NLog日志
    centos 下Supervisor 守护进程基本配置
    centos 7 下安装Nginx
    Haproxy+asp.net +RedisSessionStateProvider 完美实现负载均衡,并且session保持
    centos之Haproxy 负载均衡学习笔记
    改进初学者的PID-介绍
    实现Modbus TCP多网段客户端应用
    有一种亲切是手机
    实现Modbus ASCII多主站应用
    爱好
  • 原文地址:https://www.cnblogs.com/huayang1995/p/15763041.html
Copyright © 2011-2022 走看看