九、【React-Router6】编程式路由导航

项目修改自 上一节 的 Demo

• 声明一点：目前使用新 Hook useNavigate 只支持 state 传参

1、调整项目结构

由于之前路由组件和普通组件未区分开，这里做一下区分，调整一下项目结构（新增一个Header）

2、Message.jsx

• 使用新 Hook useNavigate 实现编程式路由导航
  • useNavigate() 获取的函数对象可以进行路由跳转，可以传入两个参数
    • path
    • 参数对象
      • replace：跳转模式
      • state：就是state参数

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

export default function Message() {

    const [messages] = useState([{
        id: '001',
        title: '小道消息',
        info: '介个就是小道消息~'
    }, {
        id: '002',
        title: '大道消息',
        info: '介个就是大道消息！！！'
    }, {
        id: '003',
        title: '大道消息Plus',
        info: '介个就是大道消息Plus~'
    }])

    const navigat = useNavigate()

    const toDetail = message => {
        navigat('detail', {
            replace: false,
            state: message
        })
    }

    return (
        <div>
            <ul>
                {
                    messages.map(m => (
                        <li key={m.id}>
                            <Link to='detail' state={m}>{m.title}</Link>&nbsp;&nbsp;
                            <button onClick={() => toDetail(m)}>查看详情</button>
                        </li>
                    ))
                }
            </ul>
            <Outlet />
        </div>
    )
}

3、Header.jsx

• 新 Hook useNavigate 也可以实现前进后退操作，就和 5 里的 history 的 forward 和 back 类似

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

export default function Header() {

    const navgate = useNavigate()

    const back = () => {
        navgate(-1)
    }

    const forward = () => {
        navgate(1)
    }


    return (
        <div className="row">
            <div className="col-xs-offset-2 col-xs-8">
                <div className="page-header">
                    <h1>React Router Demo</h1>
                    <button onClick={back}>后退</button>
                    <button onClick={forward}>前进</button>
                </div>
            </div>
        </div>
    )
}

4、Result