乐趣区

关于react.js:React中使用-reactrouterdom-路由传参的三种方式详解含V5xV6x

路由传值的三种形式 (v5.x)

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
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 解析参数成对象 
state 参数
// 路由链接 (携带参数):<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}> 详情 </Link>

// 注册路由 (无需申明,失常注册即可):<Route path="/demo/test" component={Test}/>
    
// 接管参数:this.props.location.state

// 备注:刷新也能够保留住参数 

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

params 参数
// 路由链接 (携带参数):<Link to={{pathname:`/b/child1/${id}/${title}` }}>Child1</Link>
// 或 <Link  to={`/b/child1/${id}/${title}`}>Child1</Link> 

// 注册路由 (申明接管):<Route path="/b/child1/:id/:title" component={Test}/>
    
// 接管参数:import {useParams} from "react-router-dom";
const params = useParams();
//params 参数 => {id: "01", title: "音讯 1"}
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 解析参数成对象 
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: "我是梅琳"}

// 备注:刷新也能够保留住参数 

兄弟姐妹们,点波关注吧,一起分享乏味的技术!

掘金:https://juejin.cn/user/303430… 全副原创好文

CSDN:https://blog.csdn.net/qq_4275… 全副原创好文

简书:https://www.jianshu.com/u/460… 全副原创好文

segmentfault 思否:https://segmentfault.com/u/ja… 全副原创好文

博客园:https://www.cnblogs.com/Jason… 全副原创好文

退出移动版