V6版本

• search传参

// 拼接
import { useNavigate } from "react-router-dom";
const Pages = () => {
  const navigate = useNavigate();
  const name = "1";
  const verson = "1.0";
  const goTo = () => {
     navigate(`/project?name=${name}&verson=${verson}`)
      // 或者
      navigate({
         pathname: "/project",
         search: `?name=${name}&verson=${verson}`
      })
  }
 
}

// pathname+search
import { useNavigate, createSearchParams} from "react-router-dom";
const Pages = () => {
  const navigate = useNavigate();
  const params = { name: '1', verson: "1.0" };
  const goTo = () => {
      navigate({
        pathname: "/project",
        search: `?${createSearchParams(params)}`
    })
  }
}

// 参数获取
import { useSearchParams } from "react-router-dom";
const ToPage = () => {
  const [searchParams] = useSearchParams();
  const name = searchParams.get("name");
  const version = searchParams.get("version");
  return (<h1>name : {name}, version : {version}</h1>)}
}

• params传参

import { useNavigate } from "react-router-dom";
const name = "1";
const version = "1.0";
const goTo = () => {
    navigate(`/project/${name}/${version}`)
}

// 参数获取
import { useParams } from "react-router-dom";
const ToPage = () => {
  const { name, version } = useParams();
  return (<h1>name : {name}, version : {version}</h1>)}
}

• state传参

import { useNavigate } from "react-router-dom";
const goTo = () => {
  navigate(`/project`, { state: {name: "1", version:"1.0"} } )
}

// 参数获取
import { useLocation } from "react-router-dom";
const ToPage = () => {
  const location = useLocation ();
  const { name, version } = location.state;
  return (<h1>name : {name}, version : {version}</h1>)}
}

V5版本

• search传参

import { useHistory } from 'react-router-dom';
const history = useHistory();
history.push('/project?id=1')  
// 或者
history.push({pathname:'/project',search:'?id=1'})

/**
* URLSearchParams获取路由参数
* IE11及以下浏览器不支持浏览器内置的URLSearchParams API
**/
function useQuery() {
  return new URLSearchParams(useLocation().search);
}
const query = useQuery()
const id = query.get('id') //1

/**qs获取路由参数*/
import { useLocation } from 'react-router-dom';
import qs from 'query-string';

export function useQuery() {
  const { search } = useLocation();
  return qs.parse(search);
}
const query = useQuery();
const { id } = query //1

• params传参

import { useHistory,useParams } from 'react-router-dom';
const history = useHistory();
history.push('/project/1')

// 参数获取
const params = useParams()  
console.log(params) // {id: 1}

• state传参

import { useHistory,useLocation } from 'react-router-dom';
const history = useHistory();
history.push(`/user/role/detail`, { project: {id:1,version:"1.0"} });

// 参数获取
const { state } = useLocation()
console.log(state)  // {id:1,version:"1.0"}

【重点】<HashRouter>通过state传递参数，刷新页面后参数会丢失，官方建议使用<BrowserRouter>，<BrowserRouter>页面刷新参数不会丢失。