react 训练通关之路由传参

注意：React-dom 17版本以上 useHistory 更新为useNavigate传值

1.react路由传参之useParams

import { useHistory, useParams } from "react-router-dom";
import qs from 'query-string';

export function goDetail() {
  const history = useHistory();
  history.push("/detail/1/man");
  // 地址栏：
  history.push('/detail?id=1')
  // search
  history.push({pathname:'/detail',search:'?id=1'})
  // state
  history.push(`/user/role/detail`, { state: {id:1,sex:man} });

  return (
    <div></div>
  )
}

export const Detail = () =>{
  const params = useParams();
  console.log(params);
  // {id: "1",sex:"man"}
  
  //  search
  const localtion = useLocation();
  function useQuery() {
        return queryString.parse(localtion.search);
      }
  const query = useQuery()
  console.log(localtion.search) //{id: 1}
  
  // state
  const {state} = useLocation() 
  console.log(state) // {id:1,sex:"man"}
  return (
    <div></div>
  )
}

2.react路由传参之state

优点：不直接展示参数在链接中

缺点：刷新页面，参数丢失

import { useNavigate } from "react-router-dom";

export default function myNavigateTo(){
  const navigateTo = useNavigate();

  const routerPush = () =>{
    navigateTo(`/userinfo?aa=121`,{state: {name:'nickName',sex: 'man',age:23}})
  }
  return (
    <div>
      <button onClick={routerPush}></button>
    </div>
  )
}

import { useLocation } from "react-router-dom";

export default function userInfo(){
  const localtion = useLocation();

  console.log(localtion,'---------')
  
  return (
    <div>
    </div>
  )
}

其输出如下，

1.react路由传参之search

优点：刷新页面，参数不丢失 (和直接拼接类似)

缺点：参数会拼接在路由上，获取参数需要自定义hooks

import { useNavigate,useLocation } from "react-router-dom";
import queryString from 'query-string';

export default function myNavigateTo(){
  const navigateTo = useNavigate();

  const routerPush = () =>{
    navigateTo({pathname:'/userinfo',search:'?id=1'}
  }
  return (
    <div>
      <button onClick={routerPush}></button>
    </div>
  )
}

const userinfo = () => {
    const localtion = useLocation();
    
    function useQuery() {
        return queryString.parse(localtion.search);
      }
    const query = useQuery()
    console.log(localtion.search) //{id: 1}
    return (
        <div></div>
    )
}

其输出如下，

结论，

1. 在react17版本以前，我们可以使用useHistory进行页面的路由传参，17以后转换为useNavigate
2. search路由传参的方式与拼接，参数同出现在localtion的search中
3. search需要进行自定义hook处理search