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>
  )
}