如何使用useNavigate 进行路由的跳转以及传参，并且获取参数。

前言

本文章主要是讲述如何通过useNavigate携带参数并在对应组件进行接收。

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何携带search，params，state参数

1. import React, { memo } from 'react'
2. import { useNavigate } from 'react-router-dom'
3. const Home = memo(() => {
4. const navigate=useNavigate()
5. const goDetail = () => {
6. navigate('/Detail?name=tom&age=18')
7. }
8. const goAbout = () => {
9. navigate('/About/jack')
10. }
11. const goshop = () => {
12. navigate('/Detail/Shop', { state: {name:'tom',age:"20"} })
13. }
14. return (
15. <div>
16. <button onClick={goDetail}>点我去Detail页面并且传递search参数button>
17. <button onClick={goAbout}>点我去About页面并且传递params参数button>
18. <button onClick={goshop}>点我去shop页面并且传递state参数button>
19. div>
20. )
21. })
23. export default Home

二、写对应的路由规则

1. import { useRoutes,Navigate } from "react-router-dom";
2. import Home from "../pages/Home";
3. import Detail from "../pages/Detail";
4. import About from "../pages/About";
5. import Shop from "../pages/Shop";
7. import React, { memo } from 'react'
8. const DefineRoutes = memo(() => {
9. const routes= useRoutes(
10. [
11. {
12. path: '/Home',
13. element:<Home>Home>
14. },
15. {
16. path: '/Detail',
17. element: <Detail>Detail>,
18. children: [
19. {
20. path: 'Shop',
21. element:<Shop>Shop>
22. }
23. ]
24. },
25. {
26. path: '/About/:name',
27. element:<About>About>
28. },
29. {
30. path: '/',
31. element:<Navigate to='/Home'>Navigate>
32. }
33. ]
34. )
35. return routes
36. })
38. export default DefineRoutes

三，在App导入应用

1. import React, { memo } from 'react'
2. import DefineRoutes from './router'
3. const App = memo(() => {
4. return (
5. <div>
6. <DefineRoutes>DefineRoutes>
7. div>
8. )
9. })
11. export default App

一定一定要在App组件外面包裹一层router，比如BrowerRouter

四，在不同的组件中获取不同的参数

获取Params参数使用useParams

1. import React, { memo } from 'react'
2. import { useParams } from 'react-router-dom'
4. const About = memo(() => {
5. console.log(useParams())
6. return (
7. <div>Aboutdiv>
8. )
9. })
11. export default About

获取search参数使用useSearchParams

1. import React, { memo } from 'react'
2. import {Outlet, useSearchParams } from 'react-router-dom'
5. const Detail = memo(() => {
6. const [search,setsearch] = useSearchParams()
7. console.log(search.get('name'))
8. console.log(search.get('age'))
9. return (
10. <div>Detail
11. <h1>我是Detail的子组件h1>
12. <Outlet>Outlet>
13. div>
14. )
15. })
17. export default Detail

使用useLocation获取search参数

1. import React, { memo } from 'react'
2. import { useLocation } from 'react-router-dom'
4. const Shop = memo(() => {
5. const state = useLocation()
6. console.log(state)
7. return (
8. <div>Shopdiv>
9. )
10. })
12. export default Shop

总结

不同的路由传参一定要注意，是否要在注册路由的时候接收，一定要使用对应的hook接收对应的参数。