[JavaScript知识库] React-Router-参数传递

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> React-Router-参数传递 -> 正文阅读

[JavaScript知识库]React-Router-参数传递

1.动态路由的方式

特点：参数会直接拼接到路径上，故不会因为界面刷新导致参数丢失
需要修改匹配组件路径
只能传递一个属性

1.1`Link`方式

function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props);
      console.log(props.match.params);//{id: '32564654'}
    }}>获取props</button>
  </div>;
}

1.1.1字符串

<NavLink to={"/about/32564654"}>关于我们-link跳转</NavLink> 
<Route path={"/about/:id"} component={Detail} />

1.1.2对象-推荐

<NavLink to={{pathname:"/about/32564654"}>关于我们-link跳转</NavLink> 
<Route path={"/about/:id"} component={Detail} />

1.2编程式

function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props);
      console.log(props.match.params);//{id: '32564654'}
    }}>获取props</button>
  </div>;
}

1.2.1字符串

<button onClick={()=>{
	props.history.push('/about/1321456')
}}></button>
<Route path={"/about/:id"} component={Detail} />

1.2.2对象-推荐

<button onClick={()=>{
	props.history.push({
		pathname:'/about/11111'
	})
}}></button>
<Route path={"/about/:id"} component={Detail} />

2.`search`传递参数

特点：参数会直接拼接到路径上，故不会因为界面刷新导致参数丢失
无需修改匹配组件路径
可以传递多个属性

2.1`Link`方式

import {KVOB} from 'kv-ob'
function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props);
      console.log(props.location.search);//?name=zs&age=18
      console.log(KVOB.parse(props.location.search))//{name:"zs2",age:"26"}
    }}>获取props</button>
  </div>;
}

2.1.1字符串

{/*传入字符串*/}
<NavLink to={"/about/detail?name=zs&age=18"}>关于我们-link跳转</NavLink>  
<Route path={"/about/detail"} component={Detail} />

2.1.2对象-推荐

{/*传入对象*/}
<NavLink to={{pathname:"/about/detail",search:"?name=zs2&age=26"}}>关于我们-link跳转</NavLink>
{/*传入对象-应用kv-ob这个库*/}
{/*为什么？因为search的值是一个键值对的字符串，用着不爽*/}
import {KVOB} from 'kv-ob'
<NavLink to={{pathname:"/about/detail",search:KVOB.stringify({
	name:"zs2",
	age:"26"
})}}>关于我们-link跳转</NavLink>
<Route path={"/about/detail"} component={Detail} />

2.2编程式

function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props);
      console.log(props.location.search);//?name=zs&age=18
      console.log(KVOB.parse(props.location.search))//{name:"zs1",age:"21"}
    }}>获取props</button>
  </div>;
}

2.2.1字符串

<button onClick={()=>{
	props.history.push("/about/detail?name=zs&age=18")
}}></button>
<Route path={"/about/detail"} component={Detail} />

2.2.2对象-推荐

import {KVOB} from 'kv-ob'
<button onClick={()=>{
	props.history.push({
      pathname:'/about/detail',
      search:"?name=zs1&age=21"
	})
	
	{/*传入对象-应用kv-ob这个库*/}
	props.history.push({
      pathname:'/about/detail',
      search:KVOB.stringify({
      	name:"zs1",
      	age:"21"
	  })
	})
}}></button>
<Route path={"/about/detail"} component={Detail} />

`state`传递参数

特点：参数不会拼接到路径上，界面刷新不会导致参数丢失
无需修改匹配组件路径
可以传递多个属性

`Link`方式

function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props);
      console.log(props.location.state);//{name: 'ww', level: 99}
    }}>获取props</button>
  </div>;
}
<NavLink to={{pathname:"/about/detail",state:{name:'ww',level:99}}}>关于我们-link跳转</NavLink> 
<Route path={"/about/detail"} component={Detail} />

编程式

<button onClick={()=>{
	props.history.push({
          pathname:'/about/detail',
          state:{
            name:'ls',
            age:20,
          }
	})
}}>关于我们-手动跳转</button>
<Route path={"/about/detail"} component={Detail} />

3.`query`传递参数-不推荐

特点：参数不会拼接到路径上，界面刷新会导致参数丢失
无需修改匹配组件路径
可以传递多个属性

`Link`方式

function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props);
      console.log(props.location.query);//{name: 'ls', level: 9}
    }}>获取props</button>
  </div>;
}
{/*传入对象*/}
<NavLink to={{pathname:"/about/detail",query:{name:'ls',level:9}}}>关于我们-link跳转</NavLink>
<Route path={"/about/detail"} component={Detail} />

编程式

<button onClick={()=>{
	props.history.push({
          pathname:'/about/detail',
          query:{
            name:'ls',
            age:20,
          }
	})
}}>关于我们-手动跳转</button>
<Route path={"/about/detail"} component={Detail} />

4.混合传参

链接: 文档地址.
pathname: 表示要链接到的路径的字符串。
search: 表示查询参数的字符串形式。
hash: 放入网址的 hash，例如 #a-hash。
state: 状态持续到 location。

4.1`Link`方式

function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props.location.search);//?sex=man&&level:9
      console.log(props.location.state);//{name: 'zs', age: 18}
      console.log(props.location.query);//{temData1: '临时数据1-刷新既没', temData2: '临时数据2-刷新既没'}
      console.log(props.match.params);//{id: '996'}
    }}>获取props</button>
  </div>;
}
<NavLink to={
	{
		pathname:"/about/996",
          state:{
            name:'zs',
            age:18
          },
          search:"?sex=man&&level:9",
          query:{temData1:'临时数据1-刷新既没',temData2:'临时数据2-刷新既没'}
	}
}>关于我们-link跳转</NavLink>  
<Route path={"/about/:id"} component={Detail} />

4.2编程式

function Detail(props) {
  return <div>
    <h2>详情界面</h2>
    <button onClick={()=>{
      console.log(props.location.search);//?sex=woman&&level:99
      console.log(props.location.state);//{name: 'zs1', age: 21}
      console.log(props.location.query);//{temData1: '临时数据3-刷新既没', temData2: '临时数据4-刷新既没'}
      console.log(props.match.params);//{id: '995'}
    }}>获取props</button>
  </div>;
}
<button onClick={()=>{
	props.history.push({
          pathname:"/about/995",
          state:{
            name:'zs1',
            age:21
          },
          search:"?sex=woman&&level:99",
          query:{temData1:'临时数据3-刷新既没',temData2:'临时数据4-刷新既没'}
	})
}}>关于我们-手动跳转</button>
<Route path={"/about/:id"} component={Detail} />