react-router-dom的useSearchParams 和 useLinkClickHandler

这是react-router-dom的两个api，比较不常见，但是很有用

useSearchParams

顾名思义，可以直接获取url中的query参数，而不需要引入外部库来解析路径中的query参数

import { useSearchParams} from 'react-router-dom';
// 比如 url是 /demo?name=1
function Demo(){
	const [qd] = useSearchParams ();
	// 如果没有就是 null 
	console.log(qd.get("name"))
}

useLinkClickHandler

可以模仿自定义的Link跳转，和useNavigate 类似，但是返回一个函数直接使用的

import { useNavigate, useLinkClickHandler} from 'react-router-dom';

function Demo(){
  const nav = useNavigate();
  return (
    <div className="demo">
      <button onClick={useLinkClickHandler("/list")}>go list</button>
      <button onClick={() => nav ("/list")}>go list</button>
    </div>
  )
}