router6 之传递params参数

传递params参数

修改路由表，params可以看做动态路由

const routes = [
  {
    path: '/home',
    element: <Home/>,
    children: [
      {
        path: 'news',
        element: <News/>
      },
      {
        path: 'message',
        element: <Message/>,
        children: [
          {
            path: 'detail/:id/:title/:content',   // 这里是本次改动的
            element: <Detail/>
          }
        ]
      }
    ]
  },
  {
    path: '/about',
    element: <About/>
  },
  {
    path: '/',
    element: <Navigate to="/home"/>
  },
  {
    path: '*',
    element: <Home/>
  },
]

跳转路由链接编写

message.jsx

import React,{useState} from 'react'
import {Link, Outlet} from 'react-router-dom'
import './index.css'

export function Message() {
  const [message] = useState([
    {id: '001', title: '消息1', content: '11111'},
    {id: '002', title: '消息2', content: '22222'},
    {id: '003', title: '消息3', content: '33333'},
    {id: '004', title: '消息4', content: '44444'},
  ])
  return (
    <div>
      <ul className='message'>
        {
          message.map((item)=>{
            return (
              <li key={item.id}>
                <Link to={`detail/${item.id}/${item.title}/${item.content}`}>   // 这是跳转路由携带的参数（也就是params参数）
                  {item.title}
                </Link>&nbsp;&nbsp;
              </li>
            )
          })
        }
      </ul>
      <div className='messageContent'>
        <Outlet/>
      </div>
    </div>
  )
}

如何接收params参数？

detail.jsx

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

export function Detail() {
  const {id, title, content} = useParams()
  return (
    <div>
      <p>{id}</p>
      <p>{title}</p>
      <p>{content}</p>
    </div>
  )
}

重点在useParams() 这hook里面