react入门之旅9——Route之参数传递

最新推荐文章于 2023-10-17 17:55:13 发布
最新推荐文章于 2023-10-17 17:55:13 发布
阅读量690 收藏
点赞数
分类专栏： react 文章标签： 测试工程师 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41470573/article/details/118603729
版权

示例

about页面，有new和message切换菜单，message展示消息列表，点击消息展示message详情

项目层级

这个每一篇博客都不厌其烦的写，其实这个是需要养成一个好习惯，拿起来就可以按固定格式去写，这样才能培养自己的框架思维。

src

        components

                Header

                        index.jsx

                        index.css

                MyNavLink

                        index.jsx

                        index.css

        pages

                About

                        Message

                                Detail

                                        index.jsx

                                        index.css

                                index.jsx

                                index.css

                        New

                                index.jsx

                                index.css

                        index.jsx

                        index.css

                Home

                        index.jsx

                        index.css

        App.jsx

        App.css

        index.css

        index.js

方法一：params

App

import React, {Component} from 'react';
import MyNavLink from "./components/MyNavLink";
import {Redirect, Route, Switch} from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import './App.css'

class App extends Component {
    render() {
        return (
            <div>
                <MyNavLink to="/home">Home</MyNavLink>&nbsp;&nbsp;
                <MyNavLink to="/about">About</MyNavLink>
                <Switch>
                    <Route path="/home" component={Home}/>
                    <Route path="/about" component={About}/>
                    <Redirect to="/home"/>
                </Switch>
            </div>
        );
    }
}

export default App;

Header

import React, {Component} from 'react';

class Header extends Component {
    render() {
        return (
            <div>
                <h3>Hello react-router-dom</h3>
            </div>
        );
    }
}

export default Header;

MyNavLink

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

class MyNavLink extends Component {
    render() {
        return (
            <NavLink {...this.props}/>
        );
    }
}

export default MyNavLink;

Home

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                <h3>this is Home Page</h3>
            </div>
        );
    }
}

export default Home;

About

import React, {Component} from 'react';
import MyNavLink from "../../components/MyNavLink";
import {Switch, Route} from 'react-router-dom'
import New from "./New";
import Message from "./Message";

class About extends Component {
    render() {
        return (
            <div>
                <h3>this is about page</h3>
                <MyNavLink to="/about/new">News</MyNavLink>&nbsp;&nbsp;
                <MyNavLink to="/about/message">Messages</MyNavLink>
                <Switch>
                    <Route path="/about/new" component={New}/>
                    <Route path="/about/message" component={Message}/>
                </Switch>
            </div>
        );
    }
}

export default About;

New

import React, {Component} from 'react';

class New extends Component {
    render() {
        return (
            <ul>
                <li>react</li>
                <li>vue</li>
                <li>flask</li>
            </ul>
        );
    }
}

export default New;

Message

import React, {Component} from 'react';
import MyNavLink from "../../../components/MyNavLink";
import {Route, Switch} from "react-router-dom";
import Detail from "./Detail";

class Message extends Component {

    state = {
        status: 1, total: 3, data: [
            {id: '001', name: 'react', detail: '太难了，啥时候是个头呀'},
            {id: '002', name: 'flask', detail: '要用啥学啥'},
            {id: '003', name: '测试平台', detail: '出师标志'},
        ]
    }


    render() {
        const {data} = this.state;

        return (
            <div>
                {data.map((messageObj) => {
                    return (
                        <li key={messageObj.id}>
                            <MyNavLink
                                       to={`/about/message/detail/${messageObj.id}/${messageObj.name}/${messageObj.detail}`}>{messageObj.name}
                            </MyNavLink>
                        </li>

                    )
                })}
                <Switch>
                    <Route path={`/about/message/detail/:id/:name/:detail`} component={Detail}/>
                </Switch>
            </div>
        );
    }
}

export default Message;

Detail

import React, {Component} from 'react';

class Detail extends Component {
    render() {
        const {id, name, detail} = this.props.match.params;
        return (
            <ul>
                <li>ID:{id}</li>
                <li>Title:{name}</li>
                <li>Detail:{detail}</li>
            </ul>
        );
    }
}

export default Detail;

总结：

  1. Route组件，有三个属性，history、location和match，其中params是在match里面的params
  2. params可以理解为路径
  3. path中通过/:key_0/:key_1/...来获取传递过来的value

方法一已经将所有代码都已经写了，后面方法只写不同的代码

方法二：search

Message

import React, {Component} from 'react';
import MyNavLink from "../../../components/MyNavLink";
import {Link, Route, Switch} from "react-router-dom";
import Detail from "./Detail";

class Message extends Component {

    state = {
        status: 1, total: 3, data: [
            {id: '001', name: 'react', detail: '太难了，啥时候是个头呀'},
            {id: '002', name: 'flask', detail: '要用啥学啥'},
            {id: '003', name: '测试平台', detail: '出师标志'},
        ]
    }


    render() {
        const {data} = this.state;

        return (
            <div>
                {data.map((messageObj) => {
                    return (
                        <li key={messageObj.id}>
                            <Link
                                       to={`/about/message/detail?id=${messageObj.id}&name=${messageObj.name}&detail=${messageObj.detail}`}>{messageObj.name}
                            </Link>
                        </li>

                    )
                })}
                <Switch>
                    <Route path="/about/message/detail" component={Detail}/>
                </Switch>
            </div>
        );
    }
}

export default Message;

Detail

import React, {Component} from 'react';
import querystring from 'querystring'

class Detail extends Component {
    render() {
        const {search} = this.props.location;
        const {id, name, detail} = querystring.parse(search.slice(1));

        return (
            <ul>
                <li>ID:{id}</li>
                <li>Title:{name}</li>
                <li>Detail:{detail}</li>
            </ul>
        );
    }
}

export default Detail;

总结：

  1. search存放在loaction下
  2. search是路径传的怎样的字符串接收就是怎样的字符串
  3. 通过querystring进行转换为object

方法三：state

Message

import React, {Component} from 'react';
import {Link, Route, Switch} from "react-router-dom";
import Detail from "./Detail";

class Message extends Component {

    state = {
        status: 1, total: 3, data: [
            {id: '001', name: 'react', detail: '太难了，啥时候是个头呀'},
            {id: '002', name: 'flask', detail: '要用啥学啥'},
            {id: '003', name: '测试平台', detail: '出师标志'},
        ]
    }


    render() {
        const {data} = this.state;

        return (
            <div>
                {data.map((messageObj) => {
                    return (
                        <li key={messageObj.id}>
                            <Link
                                to={{pathname: '/about/message/detail', state: {...messageObj}}}>{messageObj.name}
                            </Link>
                        </li>

                    )
                })}
                <Switch>
                    <Route path="/about/message/detail" component={Detail}/>
                </Switch>
            </div>
        );
    }
}

export default Message;

Detail

import React, {Component} from 'react';

class Detail extends Component {
    render() {
        const {id, name, detail} = this.props.location.state || {};

        return (
            <ul>
                <li>ID:{id}</li>
                <li>Title:{name}</li>
                <li>Detail:{detail}</li>
            </ul>
        );
    }
}

export default Detail;

总结：

  1. state是放在location下
  2. 第一次加载的时候state是undefined，所以需要给一个默认空对象
  3. 注意观察，这个路由的时候，url后面没有跟参数

对比

  • params是直接更改了路径，search虽然也是在路径后面加了参数，但是用问号隔开的，不属于路径。所以只有params这个方法更改了路径。更改了路径，路由才能分别识别这些Link，另外两个方法的路径一致，路由无法识别的。所以如果需要区分样式，只能使用params这个方法
  • state不会在url增加数据信息，如果涉及到敏感信息，这个方法是一个解决方案。但其实实际工作中大多数情况下会采用加密的方式来解决敏感信息暴露的问题。但state这个方法也提供了一套解决方案
  • search需要自己去解析传过来的数据
smallfish118
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router路由传参数
读心悦
11-27 3209
通配传参 1、 使用props.params 传值 <Route path="/path/:id" component={App} /> //Link组件，路由跳转，类似于a标签 <Link to="/path/id">list</Link> //子组件中获取参数 this.props.match.params.id 如果需要传对象的话，可先将对象转化为字...
react pro——————————
04-14
react pro——————————
react-router如何配置可选参数
q1ngqingsky的博客
07-22 2523
以下为转载： 在react-router 2.0中可选参数是这样写的 <Route path='/index(/:hello)' /> 而在react-4.0中你会惊喜的发现这种写法没用了，要写成这样： <Route path='/index/:hello?' /> 后边的问号表示这个参数是可选的 转载链接：https://blog.csdn.net/qq_40949386/article/details/80469431 ...
React中路由的参数传递 - 路由的配置文件
热门推荐
m0_71485750的博客
10-17 1万+
传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用):方式一: 动态路由的概念指的是路由中的路径并不会固定: 在跳转的页面中可以通过hook函数useParms获取到传入的id, 由于我们现在使用的是类组件, 无法使用hook函数, 因此需要通过高阶组件对当前组件增强(上一篇刚刚讲过高阶组件的封装, 这里直接使用, 给到大家代码) 使用高阶组件增强当前Detail组件, 就可以通过useParams获取到传递的id
Switch---实现对于React-Router中同一个组件不同参数的处理
spcming的博客
09-24 534
Switch组件实现了在同一个组件中面对不同参数进行不同形式的展现 Switch的具体用法 在需要进行传入不同参数的组件中添加Switch组件（如下面代码中的A组件），它实现了在组件中使用Route，让React-Router的使用更加灵活，在Switch中Route的匹配规则是从上到下匹配，当匹配到一个符合的路由时停止匹配，返回第一个匹配的Route import React, { Component } from 'react' import ReactDOM from 'react-dom' imp
【React】React路由的配置和传参方式
最新发布
fangyuan__的博客
10-17 159
其实是因为，Route 的机制，当匹配上了第一个 /about 组件后，它还会继续向下匹配，因此会出现两个 About 组件，这时我们可以采用 Switch 组件进行包裹，Switch匹配到第一个路由就不会继续匹配了。首先我们得 React 中路由得注册是有顺序得，我们在匹配得时候，因为 Home 组件是先注册得，因此在匹配的时候先去找 home 路由，由于是模糊匹配，会成功的匹配。它会按照第一个来匹配，如果第一个没有匹配上，那就会失败，这里的 a 和 home 没有匹配上，很显然会失败。
react router路由传参三种方式
jiao512的专栏
10-23 5654
react router路由传参三种方式：通过通配符传参、query传参和state传参。 1.通配符传参 Route定义方式： <Route path='/path/:name' component={Path}/> Link组件： <Link to="/path/通过通配符传参">通配符</Link> 参数获取： this.props.match.par...
React入门小项目——美食清单
07-18
在本React入门项目中，我们将探索如何利用React框架构建一个简单的美食清单应用。这个小demo旨在帮助初学者理解和掌握React的基础知识，包括组件化开发、状态管理和事件处理等核心概念。接下来，我们将深入讨论这些...
基于react组件之间的参数传递(详解)
08-29
React 组件之间的参数传递详解 React 组件之间的参数传递是 React 开发中一个非常重要的概念。在 React 中，组件之间的参数传递可以通过 props、state 和回调函数等方式来实现。下面我们将详细介绍 React 组件之间...
React入门教程之Hello World以及环境搭建详解
10-19
Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。...下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。
react路由传参
博客
02-19 1165
最近想用react做个前端界面，看到路由这块，关于路由传参，有不少文章没有及时更新，会对后边的人产生误导。 react路由传参有三种方式，其中放在路径中问号后面的参数（search参数），许多文章说用query传，尝试后发现不会出现在路径中 后来在Stack Overflow上找到相关问题，该方法可以用于router v3，v4及更高版本不可用，17年官方github讨论中就确认这点 Stack Overflow和官方都有推荐方法：用一个叫qs的库，实现对象与search参数的字符串化和解析 ...
ReactRouter5——参数传递
m0_54853146的博客
03-21 454
文章目录 1，路径参数 2，查询参数 3，state参数 1，路径参数 /user/1 /user/2 Route中，冒号参数名。 <Route path="/hello/:id" component={Hello}/> 接收方法：props.match.params.id。 举例： <NavLink to="/aaa/你好，世界！">aaa</NavLink> <Route path="/aaa/:msg" component={Hello1}/>
【React】React获取URL参数，根据URL参数隐藏页面元素
wenchun001的博客
09-08 1153
React获取URL参数，根据URL参数隐藏页面元素。const params = new URLSearchParams(window.location.search);
React路由详解
zgh472365411的博客
09-15 1264
React路由详解，包含React路由大部分知识点
react-router多值传参
HhouR0uiQiang的博客
06-12 1455
react路由传参可以在&lt;Link&gt;&lt;/Link&gt;传参，也可以写在点击事件里面传参。下面分别介绍一下：   一、link多个传参        1、点击某个列表到详情传参    &lt;Link to={{ pathname: "/biddingDetail", hash: "#ahash", query: { groupId: 1, proCode: 00030001, ...
React路由传参的几种方式
m0_68009075的博客
02-23 4431
React路由传参的三种方式
react router路由跳转传参，react-router-dom基本使用+4种传参方式
程序员良仔
04-18 6829
前言 目录前言一、使用场景二、使用方法三、总结 一、使用场景 二、使用方法 三、总结 你可能感兴趣的文章： vue中组件间通讯的8种方法
react router路由传参的三种方式
hehepeng123的博客
03-08 1270
1.通配符传参 Route定义方式：&lt;Route path='/About/:id' component={About} /&gt; Link组件：&lt;Link to="/path/通过通配符传参"&gt;About&lt;/Link&gt; 参数获取：this.props.location.query 优点:简单快捷,并且，在刷新页面的时候，参数不会丢失。 缺点:只能传字符串，...
react路由传参3种方式
lzfengquan的博客
08-30 5826
或者通过对象的方式传过去，页面进行接收。当然你在验证时候肯定是要自己state一个id值的，去承接设置新的值。缺点：使用HashRouter的话，刷新页面，参数会丢失；缺点：传值太多不方便而且url会变的很长。页面的接收，直接在钩子函数中进行接收验证。二：query传参：路由页面（无需配置）优点：传参优雅，传递参数可传对象；缺点：传值太多url也会变的很长。优点：传参优雅，传递参数可传对象；优点：页面刷新，参数不会丢失；缺点：刷新地址栏，参数丢失。1，刷新页面后参数不消失,j假设页面中的配置是这样的。...
React 教程第十篇 —— 路由（3.0）
05-20
当浏览器访问 `/user/123` 时，React Router 会自动将 `123` 作为参数传递给对应的组件。 下面是一个简单的例子： ```jsx import { BrowserRouter as Router, Route, Link } from "react-router-dom"; function ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值