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

原创已于 2022-12-02 16:54:29 修改 · 764 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #react-route6 #路由传参 #params #useParams

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

React 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个基于React-Router的项目案例，演示了如何在路由中传递参数，并展示了具体的实现代码。通过创建消息列表及详情页面，文章详细解释了使用`useParams`接收动态路由参数的方法。

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

项目修改自上一节的 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>
    )
}