react17-Hooks

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 17 天，点击查看活动详情

7. <Outlet>

1. 当<Route>产生嵌套时，渲染其对应的后续子路由。

2. 示例代码：

    //根据路由表生成对应的路由规则
    const element = useRoutes([
      {
        path:'/about',
        element:<About/>
      },
      {
        path:'/home',
        element:<Home/>,
        children:[
          {
            path:'news',
            element:<News/>
          },
          {
            path:'message',
            element:<Message/>,
          }
        ]
      }
    ])
    ​
    //Home.js
    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="message">Message</NavLink>
                        </li>
                    </ul>
                    {/* 指定路由组件呈现的位置 */}
                    <Outlet />
                </div>
            </div>
        )
    }
    ​
   

3.Hooks

1. useRoutes()

1. 作用：根据路由表，动态创建<Routes>和<Route>。

2. 示例代码：

    //路由表配置：src/routes/index.js
    import About from '../pages/About'
    import Home from '../pages/Home'
    import {Navigate} from 'react-router-dom'
    ​
    export default [
        {
            path:'/about',
            element:<About/>
        },
        {
            path:'/home',
            element:<Home/>
        },
        {
            path:'/',
            element:<Navigate to="/about"/>
        }
    ]
    ​
    //App.jsx
    import React from 'react'
    import {NavLink,useRoutes} from 'react-router-dom'
    import routes from './routes'
    ​
    export default function App() {
        //根据路由表生成对应的路由规则
        const element = useRoutes(routes)
        return (
            <div>
                ......
          {/* 注册路由 */}
          {element}
              ......
            </div>
        )
    }
    ​
   

2. useNavigate()

1. 作用：返回一个函数用来实现编程式导航。

2. 示例代码：

    import React from 'react'
    import {useNavigate} from 'react-router-dom'
    ​
    export default function Demo() {
      const navigate = useNavigate()
      const handle = () => {
        //第一种使用方式：指定具体的路径
        navigate('/login', {
          replace: false,
          state: {a:1, b:2}
        }) 
        //第二种使用方式：传入数值进行前进或后退，类似于5.x中的 history.go()方法
        navigate(-1)
      }
      
      return (
        <div>
          <button onClick={handle}>按钮</button>
        </div>
      )
    }
   

3. useParams()

1. 作用：回当前匹配路由的params参数，类似于5.x中的match.params。

2. 示例代码：

    import React from 'react';
    import { Routes, Route, useParams } from 'react-router-dom';
    import User from './pages/User.jsx'
    ​
    function ProfilePage() {
      // 获取URL中携带过来的params参数
      let { id } = useParams();
    }
    ​
    function App() {
      return (
        <Routes>
          <Route path="users/:id" element={<User />}/>
        </Routes>
      );
    }
   

4. useSearchParams()

1. 作用：用于读取和修改当前位置的 URL 中的查询字符串。

2. 返回一个包含两个值的数组，内容分别为：当前的seaech参数、更新search的函数。

3. 示例代码：

    import React from 'react'
    import {useSearchParams} from 'react-router-dom'
    ​
    export default function Detail() {
        const [search,setSearch] = useSearchParams()
        const id = search.get('id')
        const title = search.get('title')
        const content = search.get('content')
        return (
            <ul>
                <li>
                    <button onClick={()=>setSearch('id=008&title=哈哈&content=嘻嘻')}>点我更新一下收到的search参数</button>
                </li>
                <li>消息编号：{id}</li>
                <li>消息标题：{title}</li>
                <li>消息内容：{content}</li>
            </ul>
        )
    }
    ​