如何使用useNavigate()进行路由跳转及传参

最新推荐文章于 2024-05-11 15:58:03 发布

Yin_yihui

最新推荐文章于 2024-05-11 15:58:03 发布

阅读量5.1k

点赞数 4

分类专栏： react react-router-dom 文章标签： react.js Powered by 金山文档

本文链接：https://blog.csdn.net/Yin_yihui/article/details/129420273

版权

react 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

react-router-dom

1 篇文章 0 订阅

订阅专栏

如何使用useNavigate()跳转路由，并进行参数传递

携带的参数分为三种：search、params、state

import { useNavigate } from "react-router-dom";
function useNavigateJumpToPage() {
  const userIsInactive = useFakeInactiveUser();
  const navigate = useNavigate();
  // search
  navigate('/page1?name=jack&age=18');
  // params
  navigate('/page2/jack');
  // state
  navigate('/page3', { state: { data: 'test' } });
}

在其他组件中接收参数

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

function App() {

// 获取navigate中传递的search数据
let [searchParams, setSearchParams] = useSearchParams()
console.log(searchParams.get('name')) //  "jack"

// 获取navigate中传递的params数据
let params = useParams(); // params {"name": "jack"}


// 获取navigate中传递的state中的信息
  let location = useLocation(); 
//{
//   "pathname": "/page3",
//    "search": "",
//    "hash": "",
//    "state": {
//        "data": "test"
//    },
//    "key": "ximjwhyi"
//}

}

 //search数据，对应路由设置
<Route path="/page1" element={<Page1 />}></Route>

 // params数据，对应路由设置
<Route path="/page2/:name" element={<Page2 />}></Route>

 // params数据，对应路由设置
<Route path="/page3" element={<Page3 />}></Route>

封装高阶组件，使hooks可以在class类组件中调用

封装高阶组件

import { useNavigate, useLocation, useParams, useSearchParams } from 'react-router-dom'

// Router6 之后，代码类的API都迁移到了hooks上，但不能再类组件中调用
// 封装高阶组件，使hooks可以在class类组件中调用
const withRouter = function (WrapperComponent) {
    return function (props) {
        // 在函数组件中通过hook拿到navigate对象
        const uNavigate = useNavigate()
        // 获取navigate中state传的参数
        const uLocation = useLocation()

        const uParams = useParams();
        const uSearchParams = useSearchParams();
        // 将获取到的navigate放到一个对象中
        const router = { uNavigate, uLocation, uParams, uSearchParams }

        return <WrapperComponent {...props} router={router} />
    }
}
export {
    withRouter
}

调用

// 引入自定义高阶组件，使hooks：useNavigate可以在class中运用
import { withRouter } from '...'
class Page extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        const { uNavigate,uLocation } = this.props.router;
        console.log(uLocation)

        uNavigate('/pagexx')
    }
    render() {
        return (<div>
            page
        </div>)
    }
}

export default withRouter(Page);