react中useLocation、useNavigate、useParams、useSearchParams的使用

react中useLocation、useNavigate、useParams、useSearchParams的使用

1、假设现在有一个注册页面，从注册页面需要跳转到登陆页面，此时可以使用useNavigate来进行（在页面跳转的同时也可以传递参数）

import React from "react";
import {useNavigate} from 'react-router-dom'
const Register = () => {
  const navigate = useNavigate();
  const toLogin = () => {
    
    /* 
      第一种：params传递参数
      此方式传递参数：需要注意的是在路由中需要配置占位符
    */
    navigate('/login/17');

    /* 第二种：search传递参数 */
    navigate('/login?name=xiaoming&age=10')

    /* 第三种：state属性携带参数 */
    navigate('/login',{state: '我从登陆页面过来了！！！'})

  }

  return (
    

     注册页面
     跳转到登陆页面
    
  )
}
export default Register;

（1）params传递参数需要在路由中配置占位符

import React from "react";
import { Route, BrowserRouter, Routes } from "react-router-dom";
import Login from "../pages/login";
import Register from "../pages/register";
import App from "../App.jsx";
import List from "../pages/list";
import Material from "../pages/material";
import Edit from "../pages/edit";

/* 将所有页面的路由统一进行配置 */
const baseRouter = () => (
	
		
			}>
				}>
				}>
				}>
			
			}>
			}>
			}>
		
	
);

export default baseRouter;

2、登陆页面可以利用useLocation或者useParams来进行参数的接收

import React, { useEffect } from "react";
import { useLocation, useParams, useSearchParams} from 'react-router-dom'
const Login = () => { 

  /* 第一种params方法传递参数：用useParams来获取 */
  const getParams = useParams();

  /* 第二种search方法传递参数：用useSearchParams来获取*/
  const [getSearchArr] = useSearchParams();

  /* 第三种state属性携带参数：用useLocation来获取 */
  const currentLocation = useLocation();


  useEffect(() => {
     /*
      第一种：获取params方式携带过来的参数 
      {
        id: '17'
      }
    */
    console.log(getParams, 'getParamsis')

    /* 第二种：获取search方式携带过来的参数 */
    console.log(getSearchArr,getSearchArr.getAll('name'))//['xiaoming']
    console.log(getSearchArr,getSearchArr.getAll('age'))//['10']

    /* 
      第三种：state属性传递参数
      {
        hash: ""
        key: "jtlqbuv6"
        pathname: "/login"
        search: ""
        state: "我从登陆页面过来了！！！"
      } 
    */
    console.log(currentLocation);
  }, [])

  return (
    

     登陆页面
    
  )
}
export default Login;