react最新router6编程式导航 + 传参

1.通过useNavigate来实现编程式导航

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

export default function News() {
  // 编程式导航
  const navigate = useNavigate()
  const [likeNews] = useState([
    { id: 1, name: '哈哈哈',content:'666' },
    { id: 2, name: '看着我一望无际', content: '5555' },
    { id: 3, name: '彩色的', content: '7777' },
  ])
  function go(item) {
    // 可以带两个对象，可以带replace 还可以state
    navigate('detail',{
      replace:false,
      state:{
        id: item.id,
        title: item.title,
        content: item.content
      }
    })
  }
  return (
    <div>
      <ul>
        {likeNews.map(item => (
          <li key={item.id}>
            <button onClick={() => { go(item)}}>跳转</button>
          </li>
        ))}
      </ul>
      <div>
        <Outlet/>
      </div>
    </div>
  )
}

2.接收

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

export default function Detail() {
  // 这是连续结构赋值 把useLocation里面呢的state解构，在解构state里面的属性
  const {state:{id,name,content}} = useLocation()
  return (
    <div>
     <ul>
        <li>id:{id}</li>
        <li>content:{content}</li>
        <li>name:{name}</li>
     </ul>
    </div>
  )
}