【react-router V6】useNavigate的使用

【react-router-dom V6】useNavigate的使用

编程实现路由导航

1. 在v6之前的版本中可以直接使用history.push()和history.replace()来传递参数。
2. 在v6中使用useNavigate()实现路由跳转，但类组件中不能使用hooks函数。
3. 在v6版本中，HashRouter在页面刷新后不会导致路由state参数的丢失。

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

function Message() {
    const navigate = useNavigate()
    // 实现跳转到detail组件，且为replace跳转
    const replaceHandler = (id,title)=>{
        // param传递
        navigate('/home/message/detail',{
         replace: true,
         state:{id,title}
        })
    }
    //实现跳转到detail组件，且为push跳转
    const pushHandler = (id,title) => {
        navigate('/home/message/detail',{
         state:{id,title}
        })
    }
    //回退跳转
    const back = ()=>{
        navigate(-1)
    }
    //向前跳转
    const forward =()=>{
        navigate(1)
    }
    //跳转,设置的值为2
    const go = ()=>{
        navigate(2)
    }
    return (
        <div>
           <button onClick={()=>{pushHandler(id,title)}}>push查看</button>
           <button onClick={()=>{replaceShow(id,title)}}>replace查看</button>
           <button onClick={back}>回退</button>
           <button onClick={forward}>前进</button>
           <button onClick={go}>跳转值为2</button>

           <Routes>
              <Route path="detail/:id/:title" element={<Detail/>}/>
           </Routes> 
        </div>
    );  
}
export default Message;

在Detail组件中使用useLocation()接收参数

import React from 'react';
import { useLocation } from "react-router-dom";
interface stateType {
  id:string
  title:string
}

function Detail(props) {
    // 接收参数
    const { state } = useLocation()
    const { id,title } = state as stateType
    return (
        <div>
            <div>id:{id}</div>
            <div>title:{title}</div>
        </div>
    );
}
export default Detail;