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

5. useLocation()

1. 作用：获取当前 location 信息，对标5.x中的路由组件的location属性。

2. 示例代码：

    import React from 'react'
    import {useLocation} from 'react-router-dom'
    ​
    export default function Detail() {
        const x = useLocation()
        console.log('@',x)
      // x就是location对象: 
        /*
            {
          hash: "",
          key: "ah9nv6sz",
          pathname: "/login",
          search: "?name=zs&age=18",
          state: {a: 1, b: 2}
        }
        */
        return (
            <ul>
                <li>消息编号：{id}</li>
                <li>消息标题：{title}</li>
                <li>消息内容：{content}</li>
            </ul>
        )
    }
    ​
      
    ​
    ​
   

6. useMatch()

1. 作用：返回当前匹配信息，对标5.x中的路由组件的match属性。

2. 示例代码：

    <Route path="/login/:page/:pageSize" element={<Login />}/>
    <NavLink to="/login/1/10">登录</NavLink>
    ​
    export default function Login() {
      const match = useMatch('/login/:x/:y')
      console.log(match) //输出match对象
      //match对象内容如下：
      /*
        {
          params: {x: '1', y: '10'}
          pathname: "/LoGin/1/10"  
          pathnameBase: "/LoGin/1/10"
          pattern: {
            path: '/login/:x/:y', 
            caseSensitive: false, 
            end: false
          }
        }
      */
      return (
        <div>
          <h1>Login</h1>
        </div>
      )
    }
   

7. useInRouterContext()

作用：如果组件在 <Router> 的上下文中呈现，则 useInRouterContext 钩子返回 true，否则返回 false。

8. useNavigationType()

1. 作用：返回当前的导航类型（用户是如何来到当前页面的）。
2. 返回值：POP、PUSH、REPLACE。
3. 备注：POP是指在浏览器中直接打开了这个路由组件（刷新页面）。

9. useOutlet()

1. 作用：用来呈现当前组件中渲染的嵌套路由。

2. 示例代码：

    const result = useOutlet()
    console.log(result)
    // 如果嵌套路由没有挂载,则result为null
    // 如果嵌套路由已经挂载,则展示嵌套的路由对象
   

10.useResolvedPath()

0. 作用：给定一个 URL值，解析其中的：path、search、hash值。

render props (插槽技术)

类似于 Vue 中的插槽技术

如何向组件内部动态传入带内容的结构（即标签或组件）？

• Vue：插槽技术

• React：

  • 使用 children props：通过组件标签体传入结构
  • 使用 render props：通过组件标签属性传入结构，可携带数据

children props 方式：

• 组件标签体内容会存储到 this.props.children 中
• 缺点：A 组件无法向 B 组件传递数据

import React, { Component } from 'react'

export default class Parent extends Component {
  render() {
    return (
      <div>
        <h3>Parent组件</h3>
        <A>
          <B />
        </A>
      </div>
    )
  }
}

class A extends Component {
  state = { name: 'tom' }
  render() {
    return (
      <div>
        <h3>A组件</h3>
        {this.props.children}
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div>
        <h3>B组件</h3>
      </div>
    )
  }
}

render props 方式：

• <A render={(name) => <B name={name} />} />
• {this.props.render(name)}

import React, { Component } from 'react'

export default class Parent extends Component {
  render() {
    return (
      <div>
        <h3>Parent组件</h3>
        <A render={(name) => <B name={name} />} />
      </div>
    )
  }
}

class A extends Component {
  state = { name: 'tom' }
  render() {
    const { name } = this.state
    return (
      <div>
        <h3>A组件</h3>
        {this.props.render(name)}
      </div>
    )
  }
}

class B extends Component {
  render() {
    return (
      <div>
        <h3>B组件,{this.props.name}</h3>
      </div>
    )
  }
}