React-Router路由传参详细 #逆战班

最新推荐文章于 2023-09-14 21:31:13 发布
最新推荐文章于 2023-09-14 21:31:13 发布
阅读量280 收藏 1
点赞数
分类专栏： React #React-Router 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yawn_9410/article/details/104487381
版权

路由传值

  • 路由包裹 App 通过 context 向 App 的子孙组件去传值

  • 路由传参分为三种形式

    • query 方式传值
      • 传值：to={{pathname: '/one', query: {a: 1, b: {c: 3}}}}
      • 接收：this.props.location.query
      • 注意：
        • 刷新数据不存在
        • 默认值为 undefined，所以要做判断 this.props.location.query = this.props.location.query || {}
    • state 方式传值
      • 传值：to={{pathname: '/Two', state: {a: 10, b: {c: 30}}}}
      • 接收：this.props.location.state
      • 注意：
        • 刷新数据还在（只在本选项卡内刷新数据还在），重新打开选项卡数据不在
        • state 默认值为 undefined ，所以要做判断 this.props.location.state = this.props.location.state || {};
    • 动态路由传参，params 方式接收
      • 路由组件设置：两种设置方式
        • 第 1 种：path={'/three/:id/:type'}
        • 第 2 种: path={'/list/:type?'} ? 意思是 type 参数可写可不写，匹配到 list 就能渲染组件
      • 传值：to={{pathname: '/Three/111/222'}}
      • 接收：this.props.match.params
      • 注意：
        • 刷新数据还在，可以接收对象

query 方式传值

  • 传值：通过 NavLink 标签，to 属性，对象方式，query 参数传值，例如：<NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/one', query: {a: 1, b: {c: 3}}}}>One</NavLink>
  • 接收：目标组件，通过实例 props 属性，location 下的 query 接收，例如：console.log(this.props.location.query.a)

注意：

通过 NavLink 标签，to 属性 query 传值，刷新数据不存在

所以，使用之前需要做一个判断，即: if (this.props.location.query){console.log(this.props.location.query.a)}

或者：this.props.location.query = this.props.location.query || {}; console.log(this.props.location.query.a)

实例说明
query 传值
  • to={{pathname: '/one', query: {a: 1, b: {c: 3}}}} 传值
// src/components/MyNav.jsx 组件

import React, {Component} from 'react';
import {
    NavLink,
    Link,
} from 'react-router-dom';

export default class MyNav extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <nav>
                <NavLink exact className={'App-link'} activeClassName={'App-active'} to={'/'}>首页</NavLink>|
                <NavLink className={'App-link'} activeClassName={'App-active'} to={'/my'}>我的</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/login'}}>登录</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/order'}}>订单</NavLink>|
                {/* query 传值 */}
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/one', query: {a: 1, b: {c: 3}}}}>One</NavLink>
            </nav>
        )
    }
}
props 接收
  • this.props.location.query 接收
  • 可以接收对象
// src/views/One.jsx 组件

import React, {Component} from 'react';

export default class One extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div>One 组件</div>
        )
    }

    componentDidMount() {
        this.props.location.query = this.props.location.query || {};
        console.log(this.props.location.query.a)
        // if (this.props.location.query)
        //     console.log(this.props.location.query.a)
    }
}

state 方式传值

  • 传值：通过 NavLink 标签，to 属性，对象方式，state 参数传值，例如：<NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/Two', state: {a: 10, b: {c: 30}}}}>Two</NavLink>
  • 接收：目标组件，通过实例 props 属性，location 下的 state 接收，例如：console.log(this.props.location.state.a)

注意：

通过 NavLink 标签，to 属性 state 传值，刷新数据还在（只在本选项卡内刷新数据还在），重新打开选项卡数据不在

所以，使用之前需要做一个判断，即: if (this.props.location.state){console.log(this.props.location.state.a)}

或者：this.props.location.state = this.props.location.state || {}; console.log(this.props.location.state.a)

实例说明

state 传值
  • to={{pathname: '/Two', state: {a: 10, b: {c: 30}}}} 传值
  • 可以接收对象
// src/components/MyNav.jsx 组件

import React, {Component} from 'react';
import {
    NavLink,
    Link,
} from 'react-router-dom';

export default class MyNav extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <nav>
                <NavLink exact className={'App-link'} activeClassName={'App-active'} to={'/'}>首页</NavLink>|
                <NavLink className={'App-link'} activeClassName={'App-active'} to={'/my'}>我的</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/login'}}>登录</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/order'}}>订单</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/one', query: {a: 1, b: {c: 3}}}}>One</NavLink>|
                {/* state 传值 */}
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/Two', state: {a: 10, b: {c: 30}}}}>Two</NavLink>
            </nav>
        )
    }
}
props 接收
  • this.props.location.state 接收
// src/views/Two.jsx 组件

import React, {Component} from 'react';

export default class Two extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div>Two 组件</div>
        )
    }

    componentDidMount() {
        this.props.location.state = this.props.location.state || {};
        console.log(this.props.location.state.a);

        //     if (this.props.location.state)
        //         console.log(this.props.location.state.a);
    }
}

params 路径方式（动态路由） 传值

  • 传值：通过 NavLink 标签或者 Link 标签，to 属性，对象方式，路径方式 传值
    • 例如：<NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/Three/111/222'}}>Three</NavLink>
    • 例如：<Link to={'/goods/' + v._id + '.html'}>{v.godsName}</Link>
  • 接收：目标组件，通过实例 props 属性，match 下的 params 接收，例如：console.log(this.props.match.params.id)

注意：

通过 NavLink 标签，to 属性 路径方式 传值，刷新数据还在，可以接收对象

接收时，this.props.match.params 下接收属性名，就是设置动态路由时设置的动态路由名

即 path: '/goods/:id.html',，id 就是接收的属性名

实例说明

路由配置
// src/App.js 组件

import React from 'react';
import './App.css';
// 输入 Home 状态组件
import Home from "./views/Home";
// 输入 My 状态组件
import My from "./views/My";
// 输入 MyNav 导航
import MyNav from "./components/MyNav";
// 输入 One 组件
import One from "./views/One";
// 输入 Two 组件
import Two from "./views/Two";
// 输入 Three 组件
import Three from "./views/Three";
/*
* 输入路由 react-router-dom
* */
import {
    BrowserRouter as Router, // 浏览器路由
    Route, // 路径，可以对路径进行配置
    NavLink, // 导航
    Switch, // 按顺序匹配路由，匹配到路由停止匹配
    Redirect, // 重定向
} from 'react-router-dom';


function App() {
    return (
        <div className="App">
            <Router>
                <MyNav></MyNav>

                {/*<nav>
                    <NavLink exact className={'App-link'} activeClassName={'App-active'} to={'/'}>首页</NavLink>|
                    <NavLink className={'App-link'} activeClassName={'App-active'} to={'/my'}>我的</NavLink>|
                    <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={'/login'}>登录</NavLink>|
                    <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={'/order'}>订单</NavLink>
                </nav>*/}
                {/*
                * patch：访问的地址，'/'，默认地址
                * exact：精确匹配
                * component：输入组件
                **/}
                <Switch>
                    <Route path={'/'} exact={true} component={Home}></Route>
                    <Route path={'/my'} component={My}></Route>
                    <Route path={'/login'} component={() => <div>login</div>}></Route>
                    <Route path={'/order'} render={() => <div>订单页面</div>}></Route>
                    <Route path={'/one'} component={One}></Route>
                    <Route path={'/two'} component={Two}></Route>
                    {/* 配置动态路由 斜杠 */}
                    <Route path={'/three/:id/:type'} component={Three}></Route>
                    {/* ? 的意思 type 可写可不写，匹配到 /three/:id 也可以渲染组件*/}
                    <Route path={'/three/:id/:type?'} component={Three}></Route>
                    {/* 配置动态路由 横杠 */}
                    <Route path={'/three-:id-:type.html'} component={Three}></Route>
                    <Redirect to={'my'} from={'/profile'}></Redirect>
                    {/*<Route render={() => <div>404，您找的页面不存在</div>}></Route>*/}
                    <Route path={'*'} render={() => <div>404，您找的页面不存在</div>}></Route>
                </Switch>
            </Router>
        </div>
    );
}

export default App;
路径方式传值
// src/components/MyNav.jsx 组件

import React, {Component} from 'react';
import {
    NavLink,
    Link,
} from 'react-router-dom';

export default class MyNav extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <nav>
                <NavLink exact className={'App-link'} activeClassName={'App-active'} to={'/'}>首页</NavLink>|
                <NavLink className={'App-link'} activeClassName={'App-active'} to={'/my'}>我的</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/login'}}>登录</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/order'}}>订单</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/one', query: {a: 1, b: {c: 3}}}}>One</NavLink>|
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/Two', state: {a: 10, b: {c: 30}}}}>Two</NavLink>|
                {/* 斜杠分割传值 */}
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/Three/111/222'}}>Three</NavLink>|
                {/* 横杠分割传值 */}
                <NavLink className={'App-link'} activeStyle={{color: 'red'}} to={{pathname: '/Three-111-222.html'}}>Three - </NavLink>
            </nav>
        )
    }
}
props 接收
  • this.props.match.params 接收
import React, {Component} from 'react';

export default class Three extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div>Three 组件</div>
        )
    }

    componentDidMount() {
        console.log(this.props.match.params.id, this.props.match.params.type); // 111 222
    }
}
路友
关注
专栏目录
第4章、React-Router路由配置；
weixin_44121341的博客
04-12 608
React-Router路由配置
react-router 路由传参
weixin_42331327的博客
01-10 233
react 路由传参的方式 基础代码示例： // 1.安装react-router-dom // npm install react-router-dom --save // 子组件 Hot import React,{Component} from "react" export default class Hot extends Component{ render(){ ...
react-router路由传参
u011649691的博客
01-03 386
https://blog.csdn.net/qq_23158083/article/details/68488831 注意由于react-router4以后的版本有大的变更，所以传参的方法也有不同。
react-router 路由传参
逆风飞翔的代码狗
07-13 950
路由传递参数 我们知道前端想后台传递参数有两种方式： 一种是直接将参数放在地址栏里面传递，这里又有两种方式： /home?name=fly&age=18和/home/fly/18 另外一种方式是将参数放在body里面传递 这里针对第一种的两个传递方式： App.js export default class App extends Component { render() { return ( <Router> <Link t
react router路由跳转传参，react-router-dom基本使用+4种传参方式
程序员良仔
04-18 7129
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
React-Router实战：基本路由、路由传参、嵌套路由
若水弹丸之地
03-17 4703
安装 &amp;amp;amp;gt; npm install -g create-react-app &amp;amp;amp;gt; create-react-app demo-app &amp;amp;amp;gt; cd demo-app &amp;amp;amp;gt; npm install react-router-dom 一、基本路由（Dome1） 1、目录及 组件关系图 目录结构： 组件关系： 2、源码 ./index.js import React
koa-react-router：用于koa 2的react-router中间件
02-03
npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所...
react-router:react-router 中文文档
04-29
React Router Declarative routing for 文档 Packages 这个存储库是我们使用管理的...react--router的开发由React Training和许多的贡献者完成。 如果您有兴趣了解更多关于React能为您的公司做什么的事情，请联
mobx-react-router:使MobX状态与react-router保持同步
04-22
通过RouterStore使MobX状态与react-router保持同步。 路由器的位置状态是可观察到的，因此在MobX组件中对其进行的任何引用都会在位置更改时使组件重新呈现。 非常受启发（并复制自） 。 该分支（主节点）与react-...
关于react-router/react-router-dom v4 history不能访问问题的解决
11-28
在本文中，我们将深入探讨一个关于`react-router-dom` v4版本中的`history`对象无法访问的问题及其解决方案。 在升级到`react-router-dom` v4后，开发者可能会遇到在子组件中通过`this.props.history`无法获取到`...
React学习笔记 -- 组件通信之路由传参（react-router-dom）
高大志leo的博客
10-24 4803
最近在学习react，现在的工作中使用的是vue，在学习的过程中对两者进行比较，加深理解。 以下是react中的一小部分知识点，我个人觉得也是比较常用的知识点，react组件通信的其中一种方式--路由传参（react组件通信的方式有多种，如props、事件回调、context、router、redux、缓存等等）。现在单页面SPA应用的比较广泛，在不刷新整个页面进行部分页面的跳转，使用路由跳转便在所难免，那么react路由除了进行页面之间的跳转，还有很大一个作用就是进行页面或者组件切换时传递参...
react-routerV6 路由传递参数的三种方式
qq_43886365的博客
06-07 5401
react-router V6 传递参数的三种方式： search 传参的方式比较简单，参数的形式以 问号拼接 到地址后面 params 方式传参要求会多一些，需要我们在`路由表配置`的位置添加一个 参数占位 使用state传参时，参数需要放到state对象里面；
react路由01——react-routerV6 中路由传递参数的几种方式
最新发布
@素素~的博客
09-14 1497
react路由01——react-routerV6 中路由传递参数的几种方式
react路由跳转传递参数
Y丶小琪
12-26 7771
需求：路由跳转的时候将参数传递给跳转之后的页面。 路由： &lt;Route path='/confirmOrder' component={ConfirmOrder} /&gt; 方案一：使用query，特点是参数会出现在url上，刷新页面数据不会丢失 browserHistory.push({pathname:'/confirmOrder', query : { deliveryPri...
前端踩坑(一)-----------react-router-dom讲解
小李科技
10-31 429
贴上官网点击打开链接 react路由已经更新到4，网上的资料大多是旧版本，这里我们重点讲react-router-dom,它是用于dom绑定的react-router 常规导入 import React from 'react' import { BrowserRouter as Router,Route,Link} from 'react-router-dom' 注意BrowserR...
react路由react-router-dom路由跳转传参设置state无效，接收时state为undefined问题分析
lingliu0824的博客
06-30 4536
最近的一个需求：需要从A路由页面（"/view/personal/user"）携带一数组对象到B路由页面("/view/sysMng/user")，从而设置B页面的初始值。 最初想到的方法就是通过路由传参在A页面路由跳转时将数据放入state中，然后在B页面的componentDidMount生命周期函数中通过props.location.state接收 //A页面执行editRole方法进行路由跳转并携带state数据 private editRole = row => { this.pr
react-router-dom v6版本路由传参【search和state】
qq_60248719的博客
04-25 2459
search传参：父组件 <Message /> // 路由链接中携带参数，注册时无需接收 <Link to={`/home/message/detail?id=${i.id}&title=${i.title}`}>{i.title}</Link> search传参：子组件 <Detail /> import { useSearchParams } from 'react-router-dom' // ！！！使用useSearchParams
react-router-dom路由传参及获取方法
05-30
React Router Dom 提供了多种传递参数的方式，以下是其中几种常用的方法： 1. Query Parameters 通过 URL 上的查询参数传递参数，例如：`/user?id=123&name=John`。在组件中可以通过 `props.location.search` 来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值