六、【React-Router6】路由传参之 params

纯纯的小白

已于 2022-12-02 16:54:29 修改

阅读量597

点赞数

分类专栏： React 文章标签： react.js react-route6 路由传参 params useParams

于 2022-12-02 16:39:50 首次发布

本文链接：https://blog.csdn.net/qq_30769437/article/details/128150530

版权

React 专栏收录该内容

56 篇文章 2 订阅

订阅专栏

文章目录

1、项目结构
2、CODING
3、Result

项目修改自上一节的 Demo

项目后续增加的内容修改自八、【React-Router5】路由组件传参的 Demo

1、项目结构

在这里插入图片描述

2、CODING

2.1、routes.js

import { Navigate } from 'react-router-dom'
import About from '../components/About'
import Home from '../components/Home'
import Message from '../components/Home/Message'
import News from '../components/Home/News'
import Detail from '../components/Home/Message/Detail'

const routes = [{
    path: '/about',
    element: <About />
}, {
    path: '/home',
    element: <Home />,
    children: [{
        path: 'news',
        element: <News />
    }, {
        path: 'message',
        element: <Message />,
        children: [{
            path: 'detail/:id/:title/:info',
            element: <Detail />
        }]
    }]
}, {
    path: '/',
    element: <Navigate to='/about' />
}]

export default routes

2.2、Message.jsx

import React, { useState } from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Message() {

    const [messages] = useState([{
        id: '001',
        title: '小道消息',
        info: '介个就是小道消息~'
    }, {
        id: '002',
        title: '大道消息',
        info: '介个就是大道消息！！！'
    }, {
        id: '003',
        title: '大道消息Plus',
        info: '介个就是大道消息Plus~'
    }])

    return (
        <div>
            <ul>
                {
                    messages.map(m => (
                        <li key={m.id}>
                            <NavLink className='list-group-item' to={`detail/${m.id}/${m.title}/${m.info}`}>{m.title}</NavLink>
                        </li>
                    ))
                }
            </ul>
            <Outlet />
        </div>
    )
}

2.3、Detail.jsx

使用新Hook useParams 接 params 参数

import React from 'react'
import { useParams } from 'react-router-dom'

export default function Detail() {

    const { id, title, info } = useParams()
    // 也可以用 useMatch 但是正常人不会用的，因为它需要传入全路径：useMatch('/home/message/detail/:id/:title/:info')

    return (
        <ul>
            <li>id：{id}</li>
            <li>标题：{title}</li>
            <li>内容：{info}</li>
        </ul>
    )
}