React-Router v6 传递和接收state参数

最新推荐文章于 2023-08-18 10:25:48 发布

weixin_46077728

最新推荐文章于 2023-08-18 10:25:48 发布

阅读量3.5k

点赞数 2

文章标签： react.js javascript 前端

1.传递参数

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


export default class Messages extends Component {
    state ={messageArr:[
        {id:'1',title:'消息1'},
        {id:'2',title:'消息2'},
        {id:'3',title:'消息3'},
    ]}
   
    render() {
        const {messageArr} = this.state
        return (
            <div>

                <ul>
                {
                    messageArr.map((messageObj)=>{
                        return <li key={messageObj.id}>
                            {/* 向路由链接传递search参数 */}
                            {/* <Link to={{pathname:'/home/messages/detail',state:{'id':messageObj.id,'title':messageObj}}}>{messageObj.title}</Link> */}
                            <Link to={`/home/messages/detail`} state={{id:messageObj.id,title:messageObj.title}}>{messageObj.title}</Link>
                        </li>
                    })
                }
                </ul>
                <hr />
                <div>
                    <Routes>
                        <Route path="/detail" element={<Detail/>}>
                        </Route>
                    </Routes>
                </div>
            </div>
            
        )
    }
}

2.接受参数


import { useLocation } from 'react-router-dom'

import React from 'react'

export default function Detail() {
    
    const DetailData =[
        {id:'1',content:'你好，上海'},
        {id:'2',content:'你好，北京'},
        {id:'3',content:'你好，广州'},
    ]
    // 接受state参数
    const Stateparams = useLocation()
    const {id,title} = Stateparams.state
    // const id = params.get("id")
    // const title = params.get("title")
    
    const deatilContent = DetailData.find((detailObj)=>{
        return detailObj.id === id
    })
    return (
        <ul>
            <li>ID:{id}</li>
            <li>title:{title}</li>
            <li>content:{deatilContent.content}</li>
        </ul>
    )
    
}