这是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>
)
}