基础的路由传参——params、search(query)、state

原创已于 2024-01-02 11:03:46 修改 · 871 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #react.js

于 2024-01-01 14:13:00 首次发布

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了在React中使用三种方式传递参数到路由组件：通过params（路径参数）、search查询字符串和通过state（页面跳转时保持的状态）。详细展示了如何在链接、路由声明和子组件中实现这些参数的接收和处理。

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

1、params传参

路由链接携带参数：${item.id}/${item.content}

<li key={item.id}>
  {/* params传参直接写在路径后面，向路由组件传底params参数 */}
  <Link to={`/home/messages/detail/${item.id}/${item.content}`}>{item.content}</Link>
</li>

注册路由声明接收：/:id/:content

 {/* 注册路由 ，接收params参数；Detail组件props>math>params会收到传过去的参数*/}
 <Route path="/home/messages/detail/:id/:content" component={Detail}></Route>

子组件接收参数：

import React, { Component } from 'react'

export default class Detail extends Component {
    render() {
        const { match: { params } } = this.props;
        const DetailData = [
            { id: '01', DetailInfo: '详情一' },
            { id: '02', DetailInfo: '详情二' },
            { id: '03', DetailInfo: '详情三' },
            { id: '04', DetailInfo: '详情四' },
        ]
        const findId = DetailData.find(item => {
            return params.id === item.id
        });
        return (
            <div>
                <p>id：{params.id}</p>
                <p>title：{params.content}</p>
                <p>DetailInfo：{findId.DetailInfo}</p>
            </div>
        )
    }
}

2、search传参

路由携带参数：?id=${item.id}&title=${item.content}

{
  massageArr.map((item) => {
    return (
       <li key={item.id}>
       {/* search传参 */}
       <Link to={`/home/messages/detail/?id=${item.id}&title=${item.content}`}>{item.content}</Link>
       </li>
     )
   })
}

注册路由无需声明接收：

  <Route path="/home/messages/detail" component={Detail}></Route>

子组件接收参数：

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

export default class Detail extends Component {
    render() {
        const { location: { search } } = this.props;
        // qs字符串转成对象，然后取出参数
        const { id, title } = qs.parse(search.slice(1));
        const DetailData = [
            { id: '01', DetailInfo: '详情一' },
            { id: '02', DetailInfo: '详情二' },
            { id: '03', DetailInfo: '详情三' },
            { id: '04', DetailInfo: '详情四' },
        ]
        const findId = DetailData.find(item => {
            return id === item.id
        });
        return (
            <div>
                <p>id：{id}</p>
                <p>title：{title}</p>
                <p>DetailInfo：{findId.DetailInfo}</p>
            </div>
        )
    }
}

3、state传参

路由携带参数：

<li key={item.id}>
   {/* state传参 */}
   <Link to={{pathname:'/home/messages/detail',state:{id:item.id,title:item.content}}}>{item.content}</Link>
</li>

注册路由无需声明接收：

  <Route path="/home/messages/detail" component={Detail}></Route>

子组件接收参数：

const { id, title} = this.props.location.state;

注：HashRouter刷新后会导致state参数（前提不存）丢失