向路由组件中传递参数
2022/5/3 23:23:30
本文主要是介绍向路由组件中传递参数,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
通过params传递
export default class Message extends Component { state = { messageArr: [ { id: '1', title: '消息1' }, { id: '2', title: '消息2' }, { id: '3', title: '消息3' } ] } render() { return ( <div> <ul> { this.state.messageArr.map((msgObj) => { return ( <li key={msgObj.id}> {/* 向路由组件传递params传递参数 */} <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link> </li> ) }) } <hr /> {/* 声明接收params参数 */} <Route path="/home/message/detail/:id/:title" component={Detail} /> </ul> </div> ) } }
const DetailData = [ { id: '1', content: '你好,北京' }, { id: '2', content: '你好,上海' }, { id: '3', content: '你好,广东' } ] export default class Detail extends Component { render() { console.log(this.props); // 接收params参数 const { id, title } = this.props.match.params const findResult = DetailData.find((detailObj) => { return detailObj.id === id }) return ( <div> <li>Id:{id}</li> <li>Title:{title}</li> <li>Content:{findResult.content}</li> </div> ) } }
通过Search传递路由参数
export default class Message extends Component { state = { messageArr: [ { id: '1', title: '消息1' }, { id: '2', title: '消息2' }, { id: '3', title: '消息3' } ] } render() { return ( <div> <ul> { this.state.messageArr.map((msgObj) => { return ( <li key={msgObj.id}> {/* 向路由组件传递params传递参数 */} {/* <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link> */} {/* 向路由组件传递search传递参数 */} <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`} >{msgObj.title}</Link> </li> ) }) } <hr /> {/* 声明接收params参数 */} {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */} {/* 声明接收search参数 ,无需声明接收,正常注册理由即可*/} <Route path="/home/message/detail" component={Detail} /> </ul> </div> ) } }
const DetailData = [ { id: '1', content: '你好,北京' }, { id: '2', content: '你好,上海' }, { id: '3', content: '你好,广东' } ] export default class Detail extends Component { render() { console.log(this.props); // 接收params参数 // const { id, title } = this.props.match.params //接收search参数 const { search } = this.props.location const { id, title } = qs.parse(search.slice(1)) const findResult = DetailData.find((detailObj) => { return detailObj.id === id }) return ( <div> <li>Id:{id}</li> <li>Title:{title}</li> <li>Content:{findResult.content}</li> </div> ) } }备注:获取到的search是urlencoded编码字符串,需要借助querystring进行解析 通过state传递路由参数
export default class Message extends Component { state = { messageArr: [ { id: '1', title: '消息1' }, { id: '2', title: '消息2' }, { id: '3', title: '消息3' } ] } render() { return ( <div> <ul> { this.state.messageArr.map((msgObj) => { return ( <li key={msgObj.id}> {/* 向路由组件传递params传递参数 */} {/* <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link> */} {/* 向路由组件传递search传递参数 */} {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`} >{msgObj.title}</Link> */} {/* 向路由组件传递state传递参数 */} <Link to={{ pathname: "/home/message/detail", state: { id: msgObj.id, title: msgObj.title } }} >{msgObj.title}</Link> </li> ) }) } <hr /> {/* 声明接收params参数 */} {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */} {/* 声明接收search参数 ,无需声明接收,正常注册理由即可*/} {/* <Route path="/home/message/detail" component={Detail} /> */} {/* 声明接收state参数 ,无需声明接收,正常注册理由即可*/} <Route path="/home/message/detail" component={Detail} /> </ul> </div> ) } }
const DetailData = [ { id: '1', content: '你好,北京' }, { id: '2', content: '你好,上海' }, { id: '3', content: '你好,广东' } ] export default class Detail extends Component { render() { console.log(this.props); // 接收params参数 // const { id, title } = this.props.match.params //接收search参数 // const { search } = this.props.location // const { id, title } = qs.parse(search.slice(1)) //接收state参数 const { id, title } = this.props.location.state || {} const findResult = DetailData.find((detailObj) => { return detailObj.id === id }) || {} return ( <div> <li>Id:{id}</li> <li>Title:{title}</li> <li>Content:{findResult.content}</li> </div> ) } }
这篇关于向路由组件中传递参数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-03万字长文聊聊Web3的组成架构
- 2024-07-02springboot项目无法注册到nacos-icode9专业技术文章分享
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?