React.js学习（十）、路由传参

最新推荐文章于 2025-01-23 21:16:58 发布
最新推荐文章于 2025-01-23 21:16:58 发布
阅读量428 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： React.js 文章标签： react.js 路由
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangxiaoguo1/article/details/114136623
博客主要介绍了在React中向路由组件传递参数的方法，包括params、search和state参数，还提及了push与replace模式，这些内容有助于开发者在React项目中更好地进行路由管理和组件间的数据传递。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、向路由组件传递params参数

render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        messageArr.map((msgObj)=>{
                            return (
                                <li key={msgObj.id}>
                                    {/* 向路由组件传递params参数 */}
                                    <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr/>
                {/* 声明接收params参数 */}
                <Route path="/home/message/detail/:id/:title" component={Detail}/>
            </div>
        )
    }

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 (
            <ul>
                <li>ID:{id}</li>
                <li>TITLE:{title}</li>
                <li>CONTENT:{findResult.content}</li>
            </ul>
        )
    }
}

在这里插入图片描述

二、向路由组件传递search参数

render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        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>
                            )
                        })
                    }
                </ul>
                <hr/>
                {/* 声明接收params参数 */}
                {/* <Route path="/home/message/detail/:id/:title" component={Detail}/> */}

                {/* search参数无需声明接收，正常注册路由即可 */}
                <Route path="/home/message/detail" component={Detail}/>

            </div>
        )
    }

import qs from 'querystring'

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 (
            <ul>
                <li>ID:{id}</li>
                <li>TITLE:{title}</li>
                <li>CONTENT:{findResult.content}</li>
            </ul>
        )
    }
}

在这里插入图片描述

三、向路由组件传递state参数

render() {
        const {messageArr} = this.state
        return (
            <div>
                <ul>
                    {
                        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>
                            )
                        })
                    }
                </ul>
                <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}/>

            </div>
        )
    }

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 (
            <ul>
                <li>ID:{id}</li>
                <li>TITLE:{title}</li>
                <li>CONTENT:{findResult.content}</li>
            </ul>
        )
    }
}

在这里插入图片描述

总结

1.params参数
        路由链接(携带参数)：<Link to='/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编码字符串，需要借助querystring解析
3.state参数
       路由链接(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
       注册路由(无需声明，正常注册即可)：<Route path="/demo/test" component={Test}/>
       接收参数：this.props.location.state
       备注：刷新也可以保留住参数
  • push与replace模式

开启replace模式，没有历史记录
<Link replace to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title}</Link>
【React】路由组件传参（三种方案params、search、state）
Coding and studying
07-12 6073
示例： 示例重点在于：Message组件本身是一个路由组件，其又是Detail组件的父组件，在Message组件中注册Detail子组件，点击导航栏对应链接，将对应的message消息内容传递给子路由组件Detail。然后Detail接收到父路由组件Message传递的params参数，将内容显示在页面对应位置中。接下来展示Message与Detail组件源码： Message组件源码： Detail组件源码： Home组件源码： 路由组件传参——params总结：上面我们学会了向路由组件传递params
react-router 路由传参
逆风飞翔的代码狗
07-13 980
路由传递参数 我们知道前端想后台传递参数有两种方式： 一种是直接将参数放在地址栏里面传递，这里又有两种方式： /home?name=fly&age=18和/home/fly/18 另外一种方式是将参数放在body里面传递 这里针对第一种的两个传递方式： App.js export default class App extends Component { render() { return ( <Router> <Link t
react-router之参数传递
youhebuke225的博客
05-19 1005
https://blog.csdn.net/big_sun_962464/article/details/122462212 例子 import { Routes, Route, useNavigate, NavLink,useParams, Link,Outlet,useSearchParams,useLocation } from "react-router-dom"; import React,{ useEffect } from "react"; export default function A
React - 路由组件传参
技术共享，共同进步！
09-05 499
React - 路由组件传参
React路由组件传递参数
Frank---7的博客
05-10 379
向路由组件传递参数 1.params参数 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/> 接收参数：this.props.match.params 2.search参数 路由链接(携带参数)：<Link to='/demo/
react hooks 路由传参 适合刚学习的你
weixin_45567934的博客
07-17 664
如果需要传递一个对象的话，可以将 json 对象转换为字符串，传递获取后再将 json 字符串转换为对象将数据取出来。这种方式参数数据不会显示在地址栏中，刷新也不会消失，如果失去登陆态导致重新登陆，state直接成为undefined。这种方式参数数据不会显示在地址栏中，刷新也不会消失，如果失去登陆态导致重新登陆，地址栏和search并不会丢失。地址栏表现为：/home/priceManagement/createCoupon/130。读取参数用:this.props.match.params.name。
React学习笔记 -- 组件通信之路由传参（react-router-dom）
2301_82244343的博客
04-13 1204
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取[外链图片转存中…(img-Gjq9F1E6-1712952003892)][外链图片转存中…(img-lDmfIYzh-1712952003893)]
React Router v5 版本中，路由传参主要方式
weixin_42776027的博客
04-26 932
每种方式适用于不同场景，动态路由参数适用于路径中固定位置的参数，查询参数适用于可选参数或需要在 URL 中可见的参数，而。后跟参数名的形式，可以捕获特定部分的 URL 路径作为参数传递给目标组件。在目标组件中，可以使用。是一个任意的 JavaScript 对象，它不会出现在 URL 中，但会在路由跳转过程中被保存在。综上所述，在 React Router v5 中，您可以使用动态路由参数、URL 查询参数或。适用于不需要在 URL 中显示的私密或复杂数据。在目标组件中，可以使用。在目标组件中，可以通过。
React 路由导航与传参详解
最新发布
2301_80052985的博客
01-23 2564
通过，我们可以轻松实现 React 应用中的路由导航、传参以及嵌套路由。<Link>和提供了灵活的导航方式，而和useParams则帮助我们处理路由传参。<Outlet />组件为嵌套路由提供了便捷的占位符功能。此外，通过redirect参数，我们可以在用户登录后将其重定向回原本想要访问的页面，从而提升用户体验。掌握这些工具和技巧，能够帮助我们构建更加复杂和高效的单页面应用。
八、【React-Router5】路由组件传参
天行健，君子以自强不息
11-29 1164
八、【React-Router5】路由组件传参
react-router如何传参
云中客的博客
11-24 1030
通过params传参 /*路由配置页面*/ <Route path="/addPage/:id" component={addPage} /> /*跳转前的页面，点击后跳转的方法*/ goAddPage() { let id = 111 this.props.router.push({ pathname: `/addPage/${id}` }) } 在跳转后的页面中可以通过this.props.router.params得...
react router路由跳转传参，react-router-dom基本使用+4种传参方式
程序员良仔
04-18 7322
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
React学习day9-NavLink、路由、params、search、state
weixin_46758732的博客
06-19 663
封装NavLink NavLink可以实现路由链接的高亮，通过activeClassName指定 标签体内容是一个特殊的标签属性 通过this.props.children可以获取标签体内容 App.js <MyNavLink to="/about" >About</MyNavLink> <MyNavLink to="/home">Home</MyNavLink> {/*注册路由*/} <Route path=
react路由基础与传参
weixin_44708870的博客
05-04 1711
路由三种传参方式：params search state
React路由传参的三种方式以及踩坑
m0_49155480的博客
09-27 638
React的三种路由传参的方式 最近一直在写官网，之前主要是写管理后台，所以踩到的一些坑，分享一下 路由的区别：管理后台的路由都是使用HashRouter（/#/）,官网的页面使用BrowserRoute（/）。 使用BrowserRoute会遇到页面直接输入地址，如果不是首页就404或者跳转到没主页后刷新页面出现404。解决方案：nginx配置文件加上 try fiels $uri $uri/ /index.html location /images/ { root /opt/html/; try_fi
React-Router传递参数
火星基地
04-19 778
1. params 路由链接（携带参数）：<Link to="/demo/test/tom/18">详情</Link> <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link> 注册路由（声明接收）：<Route path="/demo/test/:name/:age" component={Test} /> <Route
React-Router 路由传参的几种方式
zmjのblog
10-26 1562
1.get传值 路由配置还是普通的配置，如：‘admin’ 传参方式如：‘admin?id=‘1111’’ 通过this.props.location.search获取url获取到一个字符串’?id=‘1111’ 我们可以用url，qs，querystring，浏览器提供的api URLSearchParams对象（do not need to support IE and do not contain array or object）或者自己封装的方法去解析出id的值。 2.动态路由传值 路由需要配置成动
React 路由传值的三种方法
YWW_ABC的博客
12-18 2604
React传值
react histroy.push 路由跳转传参
06-01
在React中，也可以通过React Router实现路由跳转，并且可以通过`history.push`方法进行传参。具体实现如下： ```javascript import { useHistory } from 'react-router-dom'; function Example() { const history...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值