React-Router useParams()和useSearchParams()

1 . useParams() 获取参数

假设现有App路由

function App() {
 return (
   <Routes>
     <Route path="user" element={<Users />}>
       <Route path=":id" element={<UserDetail />} />
       <Route path="create" element={<NewUser />} />
     </Route>
   </Routes>
 );
}

那么在UserDetail内部需要用useParams来获取对应的参数

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

export default function UserDetail() {
  let params = useParams();
  return <h2>User: {params.id}</h2>;
}

2 . useSearchParams()

在以前的react开发中，对于URL搜索参数的处理，经常是自己写一些方法或者使用一些工具包去获取或者修改搜索参数。现在v6版本则提供一种名为useSearchParams的hooks的方式更加方便的操作搜索参数。其原理是基于URLSearchParams接口，先监听location.search变化，当触发setSearchParams时更据入参创建新的URLSearchParams对象，再执行改变路由的方法，进而修改location对象。

返回一个当前值和set方法：

let [searchParams, setSearchParams] = useSearchParams()

使用时可以用searchParams.get("id")来获取参数，同时页面内也可以setSearchParams({"id":2})来改变路由，这样当访问 http://URL/user?id=111 时就可以获取和设置路径

import {useSearchParams} from "react-router-dom"

function Children(){
    
    
    const [searchParams,setSearchParams]= useSearchParams();
    const changeSearchParams=()=>{
        setSearchParams({
            user:"郭芙蓉",
            skill:"排山倒海"
        })
        // 执行完之后 url=/detail?user=郭芙蓉&skill=排山倒海
        // 页面展示相关信息
    }
    return (
        <div>
          <div>
             姓名 ：{searchParams.get("user")}
             技能 ：{searchParams.get("skill")}
          </div>
          <button onClick={changeSearchParams}>修改</button>
        </div>
    )
}