获取参数 和 路由状态

获取参数

通过路由参数获取

警告

格式如下: xxx/:id

获取参数通过 useParams

• 新建一个路由

{
  path: "/page2/:id",
  element: <Page2></Page2>
},

• 在组件中获取参数

import { useParams } from "react-router-dom";
function Page2() {
  const Params = useParams();
  console.log("*****");
  console.log(Params.id);
  console.log("*******");
}

第二种通过参数来获取

警告

格式如下: xxx?id=xxx

获取参数通过 URL

• 获取参数

// 这样就能获取到了
const location = useLocation();
console.log(location);
const searchParams = new URLSearchParams(location.search);
const paramsObject = Object.fromEntries(searchParams.entries());
console.log(paramsObject);

路由状态

• 一般写在根组件中,作为判断 loading 是否完成的依据

警告

• 通过 useNavigation 来获取路由状态

• 判断是 状态是 loading 还是其他的,状态是 loading 就加载 loading 的类

export default function Root() {
  // 路由信息对象
  const navigation = useNavigation(); // 路由信息对象
  return (
    <div id="detail" className={navigation.sate == "loading" ? "loading" : ""}>
      <Outlet />
    </div>
  );
}