react 路由跳转和获取参数

### React Router 实现页面跳转及获取 URL 参数

#### 页面跳转方法

在 React 中，`react-router-dom` 提供了几种实现页面跳转的方式。一种常见的做法是在组件内部通过编程方式进行导航：

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

function MyComponent() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/new-path');
  }

  return (
    <button onClick={handleClick}>
      Go to new path
    </button>
  );
}

另一种方式是利用 `<Link>` 组件来构建可点击链接，从而触发页面间的转换[^4]。

对于更复杂的场景，比如基于条件判断或其他逻辑执行跳转操作，则可以考虑使用 `useEffect` 钩子配合 `navigate()` 函数完成这一目标[^2]。

#### 获取 URL 参数

当涉及到处理带有动态部分（即参数）的路径时，可以通过定义带占位符模式的方式来匹配这些变化，并从中提取所需的信息作为 props 传递给对应的组件实例。例如，在声明路由规则的时候指定 `{id}` 这样的通配符表示 ID 值会随请求而改变：

<Route path="/users/:userId" element={<UserProfile />} />

此时，在 UserProfile 组件内就可以访问到这个特定用户的标识信息了。具体来说，借助于 ` useParams()` Hook 可轻松取得当前 URL 上下文中存在的任何命名片段：

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

function UserProfile() {
  let { userId } = useParams();
  
  // 使用 userId 执行其他业务逻辑...
  
  return <>User Profile Page</>;
}

另外，如果希望监听并响应 URL 查询字符串的变化，那么应当采用 `useSearchParams()` 来解析和管理这类附加数据[^1]。