react-router-dom V6中使用useNavigate

react-router-dom V6中使用useNavigate

最近在网上学习React编程式路由时跟着视频上的步骤写了之后发现V6版本有些变化，踩了不少的坑，在这里总结以下
1.编程实现路由导航
在以前的版本中可以直接使用this.props.history.push()和this.props.history.replace()来传递参数。
但在V6中开始使用useNavigate()了，如果要自己写功能实现页面跳转就不能使用Link标签了。但要注意：类式组件不能使用hooks函数，如果你的组件需要使用，得改成函数式组件

这是完成相关功能的组件(Message)

import React, {Component} from 'react';
import {Link,Route,Routes,useNavigate} from 'react-router-dom'
import Detail from "./Detail";

function Message(props) {
    const state = {
        messageArr:[
            {id:'01',title:'消息1'},
            {id:'02',title:'消息2'},
            {id:'03',title:'消息3'},
        ]
    }
    
    const navigate = useNavigate()

    //编写一段代码，让其实现跳转到detail组件，且为replace跳转
    const replaceShow = (id,title)=>{
        // param传递
        navigate(`/home/message/detail/${id}/${title}`,{replace: true})
    }
    //编写一段代码，让其实现跳转到detail组件，且为push跳转
    const pushShow = (id,title) => {
        navigate(`/home/message/detail/${id}/${title}`)
    }
    //回退
    const back = ()=>{
        navigate(-1)
    }
    //向前
    const forward =()=>{
        navigate(1)
    }
    //跳转,设置的值为2
    const go = ()=>{
        navigate(2)
    }

    const {messageArr} = state
    return (
        <div>
            <ul>
                {
                    messageArr.map((msgObj)=>{
                        return (
                            <li key={msgObj.id}>
                                {/*向路由组件传递params参数*/}
                                <Link to={`detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>&nbsp;&nbsp;
                                <button onClick={()=>{pushShow(msgObj.id,msgObj.title)}}>push查看</button>
                                <button onClick={()=>{replaceShow(msgObj.id,msgObj.title)}}>replace查看</button>
                            </li>
                        )
                    })
                }
            </ul>
            <hr/>
            <Routes>
                <Route path="detail/:id/:title" element={<Detail/>}/>
            </Routes>
            
            <button onClick={back}>回退</button>
            <button onClick={forward}>前进</button>
            <button onClick={go}>go</button>
        </div>
    );
    
}

export default Message;

Detail组件

import React from 'react';
import {useLocation, useParams, useSearchParams} from "react-router-dom";


const DetailData = [
    {id:'01',content:'你好，中国'},
    {id:'02',content:'你好，川师'},
    {id:'03',content:'你好，未来的自己'},
]

function Detail(props) {
    // 接收param参数
    const params = useParams()
    const id = params.id
    const title = params.title

    const findResult = DetailData.find((content)=>{
        return content.id === id
    }) || {}

    return (
        <ul>
            <li>id:{id}</li>
            <li>title:{title}</li>
            <li>content:{findResult.content}</li>
        </ul>
    );
}

export default Detail;

2.withRouter已经过时
withRouter可以加工一般组件(即非路由组件)，让一般组件具备路由组件所持有的API。但v6版本中已废除，可以直接用useNavigate实现。
以下是一个一般组件(Header)，同样可以实现路由组件(Message)中的功能

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

function Header(props) {

    const navigate = new useNavigate()

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

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

    const go = ()=>{
        navigate(2)
    }
    
    return (
        <div className="page-header">
            <h2>React Router Demo</h2>
            <button onClick={back}>回退</button>
            <button onClick={forward}>前进</button>
            <button onClick={go}>go</button>
        </div>
    );

}

export default Header;

3.刷新页面后对路由state参数的影响
在以前版本中，BrowserRouter没有任何影响，因为state保存在history对象中；HashRouter刷新后会导致路由state参数的丢失
但在V6版本中，HashRouter在页面刷新后不会导致路由state参数的丢失