react学习日记---(6) react-router-dom@6 react路由(2)-useRoutes路由表+路由传参(params, search, state)

使用useRoutes路由表进行路由组件的控制和展示

相较于上篇文章的主要修改为
react-route学习日记4

App.js

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

import routes from '../routes'

export default function Demo() {
  // 改动1
  const element = useRoutes(routes)

  return (
    <div>
    <div className="row">
      <div className="col-xs-offset-2 col-xs-8">
        <div className="page-header"><h2>React Router Demo</h2></div>
      </div>
    </div>
    <div className="row">
      <div className="col-xs-2 col-xs-offset-2">
        <div className="list-group">

          <NavLink className="list-group-item" to="/about">About</NavLink>
          <NavLink className="list-group-item" to="/home">Home</NavLink>

        </div>
      </div>
      <div className="col-xs-6">
        <div className="panel">
          <div className="panel-body">
            {/* 改动2 */}
            {element}
          </div>
        </div>
      </div>
    </div>
  </div>
  )
}

Home.jsx

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

export default function Home () {
  return (
    <div>
      <h2>Home组件内容</h2>
      <div>
        <ul className="nav nav-tabs">
          <li>
            <NavLink className="list-group-item" to='news'>News</NavLink>
          </li>
          <li>
            <NavLink className="list-group-item" to='/home/message'>Message</NavLink>
          </li>
        </ul>
        {/* 改动1 */}
        <Outlet></Outlet>
      </div>
    </div>
  )
}

---

！！！！传递参数！！！params+search+state三合一

新增routes/index.jsx文件用于存储路由信息

src/routes/index.js

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

const routes = [
  {path: '/about', element: <About></About>},
  {
    path: '/home', 
    element: <Home></Home>,
    children: [
      {path: 'news', element: <News></News>},
      {
        path: 'message', 
        element: <Message></Message>,
        children: [
          {
            // param传递参数
            // path: 'detail/:id/:title/:content',

            // search传递参数----state传递参数
            path: 'detail',
            element: <Detail></Detail>,
          }
        ]
      },
    ]
  },
  {path: '*', element: <Navigate to="/home"></Navigate>},
]

export default routes

Message组件用于向Detail组件传递信息

Message.jsx

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

export default function Message() {
  const [message] = useState([
    {id: '001', title: '消息1', content:'小王八'},
    {id: '002', title: '消息2', content:'小牛马'},
    {id: '003', title: '消息3', content:'小蛤蟆'},
    {id: '004', title: '消息4', content:'小鸡'},
  ])
  return (
    <div>
      <ul>
        {
          message.map((item) => {
            return (
              <li key={item.id}>
                {/* params传递参数 */}
                {/* <Link to={`detail/${item.id}/${item.title}/${item.content}`}>{item.title}</Link>   */}

                {/* search传递参数 */}
                {/* <Link to={`detail?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</Link> */}

                {/* state传递参数 */}
                <Link to={'detail'} state={{id: item.id, title: item.title, content: item.content}}>{item.title}</Link>
              </li>
            )
          })
        }
      </ul>
      {/* 使用useRoutes路由表 */}
      <Outlet></Outlet>
    </div>
  )
}

新增Detail组件用于展示从Message组件接收到的参数

Detail.jsx

import React from 'react'
// params传递参数
// import { useParams } from 'react-router-dom'

// search传递参数
// import { useSearchParams } from 'react-router-dom'

// state传递参数
import { useLocation } from 'react-router-dom';

export default function Detail() {
  // params传递参数
  // const {id, title, content} = useParams()

  // search传递参数
  // const [searchParams, setSearchParams] = useSearchParams()
  // const id = searchParams.get('id')
  // const title = searchParams.get('title')
  // const content = searchParams.get('content')

  // function handleChange() {
  //   setSearchParams('id=009&title=消息998&content=小怪兽')
  // }

  // state传递参数
  const {state: {id, title, content}} = useLocation()

  return (
    <div>
      <h2>我收到了Message路由组件的信息:</h2> 
      {/* params传递参数 */}
      {/* <h3>{id}-{title}-{content}</h3> */}

      {/* search传递参数 */}
      {/* <h3>{id}-{title}-{content}</h3>
      <button onClick={handleChange}>修改内容</button> */}

      {/* state传递参数 */}
      <h3>{id}-{title}-{content}</h3>
    </div>
  )
}

1. params
   
   2.search

3. state